Create the Earth with THREE.js

Let's create a lovely multi-layered model of the earth using THREE.js

Note that in the video the model is mapped with nice, 4K textures, which I purchased from PlanetaryPixelEmporium for $8. The code repo uses the free textures (which are only 1K)

[mason]

Great video! The simplicity with which you explain every step, encourages me to try this out myself and learn more. Thank you.

[manaspaul]

Feels like seeing github's homepage. Would love to see the coordinates interaction

[justautomateit]

I'm subscriber number 1000, it was super cool to see the change from 999 to 1000 haha, thanks a lot for this content, always amazing to find three.js tutos. Kepp it up

[irfansaeedkhan]

its amazing thank you for that. award winning website effects would be great, like on scroll we go inside things and text apears then we scroll and it goes downward and we we things, something practical we see in award winning websites, that can be whole series and in market it has demand

[JunebugPresents]

Good stuff, Bobby. I'm sending this to my son.

[hdpzowb]

thank u for the code -- import method in html for three and orbital controls !! thank you again !!

[tagsoftware]

Nice work. i hope that in the future you will do something with geographic coordinates.

[private]

Awesome! Thank you! Maybe you could do one in which when a user clicks a continent a pop-up appears?

[EasyShowGallery]

That's impressive, thank you for sharing this

[Kirkpettinga]

Thanks for the content! Would love to see your solution for only showing the night lights on the dark side of the earth

[brianpatrick]

This is AWESOME, thank you! Could you make a follow on video showing how to add an animate a satellite moving in orbit with ECI coordinates?

[SajithRanatunga-pmzl]

Hi, Thank you sharing this awesome tutorial. Please if you can give us a landscape topology (terrain/lake) visualization on Three JS

[JackLeiLing]

Thanks! Super cool! Like to see how to add interactive markers

[TheBayExpresss]

I also added the bump for the Mountains etc, this is the code for the ones who want it:
let bmap =
bmap.wrapS = THREE.RepeatWrapping;
bmap.wrapT = THREE.RepeatWrapping;
bmap.repeat.set(5, 5);
earthMesh.material.bumpMap = bmap;
earthMesh.material.bumpScale = 0.004;

looks very good!

[MrRamanPP]

The clouds dont show up on the dark side of the earth. You can get around this by adding a very faint ambient light.

[antonio-arts]

Great walkthrough on the creating the quite realistic earth, thanks for sharing! I’m wondering which approach can be used to eliminate the lights on the day part of the earth

[txmw]

Great video really well explained! Im not sure if I've made a mistake but im having an issue with the lightmap and bump map. even using the code from github there is no bumps and the lightmap changes the shade of the entire object. Not sure it it's a change in the three.js version.

[brendana]

Amazing video. Quick question from a beginner. How would you recommend I use this and add, say, coordinate points for major airports or something similar? Maybe even make arching lines connecting the airports over the Earth model? Basically adding points and lines onto the 3d model.. Any video link recommendations would be greatly appreciated.

[RameshBSahoo]

Hello Sir!! Would be kind of you, if you please help us to understand, how to set-up the project please? Would be a nice kick-start to newbies like me. Thank you sir!!

[RossPfeiffer]

can info popups be combined with this globe?