Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

line with coordinates as points #65

Closed
ventoline opened this issue Oct 15, 2023 · 2 comments
Closed

line with coordinates as points #65

ventoline opened this issue Oct 15, 2023 · 2 comments

Comments

@ventoline
Copy link

ventoline commented Oct 15, 2023

This lib is a life saver!

I add 3DObjects at Mapbox coordinates and i am now trying draw a line in between ( or instead instead)
I am encountering an issue trying to draw the line with coordinates as points. How can i transcribe mapbox's coordinates into the R3F world?

A hackier way would be to retrieve the position of the 3DObjects (or the Scene), Can i access these?

 curvePoints.push([info.lngLat.lng, info.lngLat.lat, 1 ])
...
const linePTDrawn =  DrawPositions.map((pos, index) =>
<Coordinates key={index}  latitude={pos[1]} longitude={pos[0]}>
  <hemisphereLight  args={["#ffff00", "#00ffff"]  }  position={[-1, 5, -1]}   />
  <object3D scale={1000}>
    <Box  position={[.5, -.5, 0]} />
  </object3D>
  </Coordinates>
);

<Line points={curvePoints} linewidth={30} color={"red"} />

@forerunrun
Copy link

Hey @ventoline see this post from a previous thread

@ventoline
Copy link
Author

ventoline commented Oct 20, 2023

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} />
      
}

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]);

@ventoline ventoline mentioned this issue Oct 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants