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!
5 Answers
Haha, I’ve got a similar globe on my site! I used Three.js as well – it’s fantastic for this type of project.
Consider using one of the many mapping libraries in the JavaScript ecosystem. Mapbox GL and Maplibre are solid options.
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.
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.
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.
Related Questions
Glassmorphism CSS Generator with Live Preview
Remove Duplicate Items From List
EAN Validator
EAN Generator
Cloudflare Cache Detector
HTTP Status Code Check