Globe with markers

Hi,

I’m completely new to Three.js and I’m currently working on a React web app.
What I would like to find out is a way for me to create a 3d globe with some kind of map texture of the world, and markers for some cities. The globe is supposed to be at maximum size of 695x695 px, and once you select a city from a dropdown (in a different part of the app) the globe should animate/spin to that location.

I’m not looking for any zoom when clicking, more like a smooth transition between lat/lng points/markers.

And I don’t have a clue of of how complicated this is, how I should start etc?
I’ve found some examples, but feel like I need some more guidance on how to work with the whole setup.

Any help is much appreciated.

Thanks

Please help solve my problem!

Eh. Did you try using these examples, writing any (even broken) code, or searching for “markers” in the top right corner :neutral_face: ? There was quite a bit of projects posted around here that do exactly what you described, I can’t imagine there’s even a single part of it we haven’t answered yet. :’)

If there’s a specific problem we’re always glad to answer - but asking “so how do I do this entire project?” seems a bit fruitless.

1 Like

Here you can find simple and more complicated examples. :slightly_smiling_face:

How about this

https://hofk.de/main/discourse.threejs/2020/MorphPlaneSpherePlane/MorphPlaneSpherePlane.html

https://hofk.de/main/discourse.threejs/2019/MultipleImpactsEffect/MultipleImpactsEffect.html

https://hofk.de/main/discourse.threejs/2018/Paris-lat-lon/Paris-lat-lon.html

https://hofk.de/main/discourse.threejs/2018/Planes%20on%20Sphere/Planes%20on%20Sphere.html

https://hofk.de/main/discourse.threejs/2018/SphereEdgesGeometry/SphereEdgesGeometry.html

https://hofk.de/main/discourse.threejs/2017/PictureBall/PictureBall.html

https://hofk.de/main/discourse.threejs/2018/SetRemoveMarkers/SetRemoveMarkers.html

3 Likes