How Can I Build an Interactive Animated Globe Like This?
Asked by
CuriousCoder42
Hey folks! I recently found this super cool animated globe online that I'd love to incorporate into one of my upcoming projects. The only challenge is that I have no clue about how it's created. I'm reaching out to see if anyone could help me figure out how to make something similar or point me in the right direction to get started. It's an exciting idea that I want to bring to life with some personal tweaks. Here's the link to check out the globe for reference: [tv.garden](https://tv.garden/). I really appreciate any tips or guidance you can share!
Answers
It seems like it's probably a custom build! They mention on their site that they used some open-source tools. The key players include Three.js for the 3D globe and Video.js for video playback. Luxon also helps with handling local times for different regions.
Reply to this answer
You should definitely check out Three.js! It’s an open-source JS library that’s great for 3D graphics and should be perfect for your globe. If you're curious about how it was built, take a look at the page's source code; it might give you some insights.
Reply to this answer
Check out globe.gl, it utilizes WebGL and Three.js. I believe it’s what they used for the animated globe! You can find it here: [globe.gl](https://github.com/vasturiano/globe.gl). It’s based on [three-globe](https://github.com/vasturiano/three-globe) too.
Reply to this answer
Consider using one of the many mapping libraries in the JavaScript ecosystem. Mapbox GL and Maplibre are solid options.
Reply to this answer
Haha, I’ve got a similar globe on my site! I used Three.js as well – it’s fantastic for this type of project.
Reply to this answer
Add your answer
Answers are reviewed before publication.
Related Discussions