vasturiano / react-globe.gl

React component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/react-globe.gl/example/world-population/
MIT License
818 stars 150 forks source link

arcStroke supports html elements in the middle point #161

Open quanvanbinh opened 8 months ago

quanvanbinh commented 8 months ago

Dear Vasturiano,

Currently my project requires an auto rotation globe with fly routes. Each route has a small airplane symbol in the middle of the route. I am able to follow my project's design by using your library except the routes. I am using arcStroke to present the route. But the problem is I don't know how to add the airplane symbol on the arcs. I have read the guideline, arcStroke also supports ThreeJS Line and TubeGeometry, and in the arcStroke function returns an ThreeJS object. But I am a very very beginner at 3D and ThreeJS.

Please help me to put the airplane icon on the arc.

Thank you very much

vasturiano commented 8 months ago

@quanvanbinh thanks for reaching out.

You won't be able to do it with the the arcs layer directly, that only plots arc lines between two points really. But I would recommend you to look into the HTML Elements layer. That will allow you to put any custom marker (like an airplane icon f.e.) anywhere on the globe. You just need to define the position where you want it, and you could also animate its position if you'd like.