Create the Earth with THREE.js
ฝัง
- เผยแพร่เมื่อ 19 ธ.ค. 2023
- Let's create a lovely multi-layered model of the earth using THREE.js
Live demo here: bobbyroe.github.io/threejs-ea...
Code on Github: github.com/bobbyroe/threejs-e...
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)
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
Thanks for the 1,000th sub @yarumolabs!
Great video! The simplicity with which you explain every step, encourages me to try this out myself and learn more. Thank you.
Awesome! I'd love to see what you create!
Feels like seeing github's homepage. Would love to see the coordinates interaction
Noted! Thank you
That's impressive, thank you for sharing this
My pleasure!
Great video Dr. House!!
Thank you kindly
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
That would be cool! I might create a video like that, stay tuned!
Good stuff, Bobby. I'm sending this to my son.
Thanks, Clay!
thank u for the code -- import method in html for three and orbital controls !! thank you again !!
You are welcome!
This content is gold!
New sub.
Awesome, thank you!
@@robotbobby9 I'm new to 3D web.
Could you share some tips to become a creative developer?
Yes.
- start tinkering and creating today - don't wait.
- try different tools and techniques - you will find a system that works for you
- be patient and go easy on yourself - no one's a artistic genius overnight.
- create /something/ EVERY DAY, even if it's only a small thing. Stick to it!
@@robotbobby9 Ty and happy new year!
Nice work. i hope that in the future you will do something with geographic coordinates.
Thank you! I will look into geo coords!
Yes please! 😊
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
Good question! A custom shader might work, one that is transparent in direct light, and fully opaque on the shaded side
cool tut
Thanks @emilylemonly
great video...tks
Thanks for watching!
amazing more videos please!!!
More coming!
Awesome! Thank you! Maybe you could do one in which when a user clicks a continent a pop-up appears?
Great suggestion!
This demo is similar:
vasturiano.github.io/three-globe/example/html-markers/
Thanks! Super cool! Like to see how to add interactive markers
Thanks for the idea!
thanks for the video btw awesome content :)
Thank you, @Ryguy12543 !
Awesome!
Thank you! Cheers!
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?
Great suggestion! I’ll add it to the list ☝🏼
Cute!
Thanks!
Why am I getting such different results when using r161 ThreeJS instead of r131 ? Do you know how I can fix it ?
Great question! Turns out a change to colorManagement in version 152 is the reason it looks so different:
github.com/mrdoob/three.js/releases/tag/r152
add these lines (around line 16 or so)
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
(You may need to boost the `sunLight` intensity)
Hope this helps!
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.
Not sure why that's happening, could you share a codepen @txmw4464 ?
Terrific video!!
Thank you, @javifontalva7752!
Very informative video, thanks a lot!!! Dropped a sub :)
Thanks for the sub!
Amazing video!!!!
But I have a problem, if I create a function where I move the earth with the stars the rendering will lag a lot ( I have enough power in my pc ), if I don’t apply the images mesh is smooth.
Maybe I can’t use image mesh and move the object ? Is to much to handle by three is ?
🤔 Could you share a codepen example?
Nayshhh
🙏🏼😎
Thanks for the content! Would love to see your solution for only showing the night lights on the dark side of the earth
I need to have a go at that!
Just like it's implemented here:
eyes.nasa.gov/apps/solar-system/#/earth
@@robotbobby9 OMG this site is amazing!
Great
I also added the bump for the Mountains etc, this is the code for the ones who want it:
let bmap = loader.load('./assets/earth/8k_earth_normal_map.jpg');
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!
Nice! works for me too, without the repeat and a bumpScale of 4.0
nice
Thanks
The clouds dont show up on the dark side of the earth. You can get around this by adding a very faint ambient light.
Nice solution.
amazing! i want to do the same with a-frame , any advices?
I'm not familiar with A-Frame, but it looks like it's built on Three,js! Maybe build a custom *Earth* component?
aframe.io/docs/1.5.0/introduction/writing-a-component.html
Hey small question, in case we want to add flags on specific coordinates (on world map) how can we achieve that? What I was thinking to add an extra geometry which holds the specific Icons and palce them randomly.
Hey @Nutkani - good question!
I hope to explore that in a future video. Meanwhile, this looks interesting:
github.blog/2020-12-21-how-we-built-the-github-globe/
Thanks mate I have already implemented it. I can share my github link if any one is intrested.@@robotbobby9
I'm interested!
Hi, i have downloaded your code package, could you tell me how to run your project on vscode?thanks
Please watch this tutorial:
Getting Started with Three.js: A Beginner's Tutorial
th-cam.com/video/XPhAR1YdD6o/w-d-xo.html
I'm 805 like :) I would like to ask is it something that I can depend on to generate my vectors and graphics into animation such as lottie!?
Share if you have any ideas!
Much thanks,
@chillouthere4056 - Although I haven't tried it myself, looks like there's a discussion about this here:
discourse.threejs.org/t/convert-3d-model-in-threejs-scene-to-svg/31088
It's possible to copy the github globe in the mainpage? Inspect element have everything in the code? I see one guy showing the exact globe in a localhost.. You can make a exact copy of github globe?
Unlikely. Here's an interesting repo:
github.com/vasturiano/three-globe
I hope to create a Github Globe tutorial soon!
This looks cool too:
github.blog/2020-12-21-how-we-built-the-github-globe/
@@robotbobby9 yah but i see a video of a guy how have a exact copy of github globe! if you search github globe here on yt you will find
Hi, Thank you sharing this awesome tutorial. Please if you can give us a landscape topology (terrain/lake) visualization on Three JS
Great suggestion! I'm adding it to my list of video ideas!
@@robotbobby9 Thank you.
why DiretionalLights does not work in some cases?
Could be that it wasn't added to the scene? Or it's intensity is low or 0, or that the materials do not respond to lights ... lots of cases. You can also check
discourse.threejs.org/search?q=directional%20light%20not%20working
where can i get the code that you started with ?
github.com/bobbyroe/getting-started-threejs - check out the *start* branch
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!!
I was just about to link you to my Getting Started tutorial, but you found it already!
Could Smesh!
thanks
Is there any other way to create the stars !?
Yes, @hitmeup4918, there are many other ways. Depends on what you need. You could, for example, texture a sphere with an image of stars, place your scene inside the star sphere. Or you could use a background image in your scene.
is this code on github somewhere? I would love to read through.
Yes! github.com/bobbyroe/threejs-earth
I'm subscribing your channel please upload more 3js content
More coming every week! Meanwhile, check out this playlist:
th-cam.com/play/PLb9_Nx5huIwmH7vu8eaDnr6fw2c9AOXvw.html&si=eAAkNYHlO8iYX_9k
@@robotbobby9 Thanks friend
Thank you!
the matrix is made with threejs
Is that a suggestion? Make the Matrix effect in WebGL?
😎
@@robotbobby9 yes and holograms too