RodrigoHamuy / react-three-map

Use React and Three.js inside Mapbox and Maplibre
https://rodrigohamuy.github.io/react-three-map/
MIT License
208 stars 29 forks source link

mercator line #71

Closed ventoline closed 9 months ago

ventoline commented 1 year ago

.. following the previous discussion

Thanks. Sorry for the late reply. I am trying to wrap my head around this. the ajustment works when I implement the extruded shape. I need a line, like drawing on a mercator map, I get this:

  // need to bring it to mercator space ??
   // const points = props.drawnPoints.map((p) => coordsTovector3(p,  props.drawnPoints[0])).map(([x, , z]) => new Vector2(x, z));

    return (
        <group>
        <Line points={flatPt} lineWidth={1} color={'rgba(25,255,255, .20)'} opacity={.1} linejoin={'round'} transparent={true} />
         </group>

}

Screenshot (523)

so i implemented a mercator projection instead, it is a bit hacky, what should i use instead? const flatPt = props.drawFlat.map((p)=> [(p.x * 40000000 )- 20010000 , p.z, (p.y * 40000000) -20004000]);

RodrigoHamuy commented 1 year ago

I'm not sure... Can you create a sandbox to have a better understanding of the issue, maybe?