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
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
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!
Brilliant video - love subtle effects with the lighting and glow. Would it be possible to plot coordinates onto the globe and join them up? Kind of like a Google maps route. Also wondering which version of the texture is being used in the live demo - is that the 4k version as well?
Thank you! It is possible to plot coords - I explored geoJSON a bit here: th-cam.com/video/f4zncVufL_I/w-d-xo.html The live demo uses 1k texture maps github.com/bobbyroe/threejs-earth/tree/main/textures
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?
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.
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.
Thanks @brendana8069 - Adding points and lines to this project (using real data) is on my list! Meanwhile there are likely a few videos out there that cover this, I'll keep an eye out.
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 ?
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!
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/
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
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!
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!!
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
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
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
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.
It's cool but if you're building this stuff for the web, using textures just isn't going to work, due to how large they are (if you want good quality). Procedural generation using shaders is the only way.
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
simple and fast video!! loved the glow effect :)
Thank you @SaasAround 🙏🏼
Great video Dr. House!!
Thank you kindly
Good stuff, Bobby. I'm sending this to my son.
Thanks, Clay!
Great video! Thank you very much for your amazing content. ✨
I'm so glad it was helpful! Thanks for watching!
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!
That's impressive, thank you for sharing this
My pleasure!
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! 😊
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!
Super demo can you show how to plot points or graphics to specific locations on earth based on lat, long cords ?
Thank you, and great suggestion! Adding it to my list of ideas.
Have done the code for it if you want to have it. JSON file of points and plots them using Cartesian
Brilliant video - love subtle effects with the lighting and glow.
Would it be possible to plot coordinates onto the globe and join them up? Kind of like a Google maps route.
Also wondering which version of the texture is being used in the live demo - is that the 4k version as well?
Thank you! It is possible to plot coords - I explored geoJSON a bit here: th-cam.com/video/f4zncVufL_I/w-d-xo.html
The live demo uses 1k texture maps
github.com/bobbyroe/threejs-earth/tree/main/textures
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
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
Hey, great video! I just have a quick question. Would it be possible to have the lights disappear when it is day, so it looks realistic?
Thanks! and yes it's possible - my first thought is to create a shaderMaterial with code that is transparent when directly lit
can info popups be combined with this globe?
Yes they can! I'm planning a video to show how, coming soon!
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 ?
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/
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.
Thanks @brendana8069 - Adding points and lines to this project (using real data) is on my list! Meanwhile there are likely a few videos out there that cover this, I'll keep an eye out.
Here's one: th-cam.com/video/ddIZlWmfFKM/w-d-xo.html
@@robotbobby9 I appreciate this so much and will be learning with all your vids!
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?
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!
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!
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
Good job. What about Solar system??
Build the Solar System with Three.js
th-cam.com/video/5Wj3TnktlGc/w-d-xo.html
That's great, bro.👏👏👏👏
Thanks! 😃
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
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!
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.
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
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
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
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 ☝🏼
Great Video! Is it possible to map out coordinates, lets say if someone picks USA, i can rotate the model to the specific location. Thanks again
Interesting idea, and I'll bet it's doable. I'll add it to my list!
Thanks! Super cool! Like to see how to add interactive markers
Thanks for the idea!
cool tut
Thanks @emilylemonly
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!
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.
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.
amazing more videos please!!!
More coming!
Awesome!
Thank you! Cheers!
where can i get the code that you started with ?
github.com/bobbyroe/getting-started-threejs - check out the *start* branch
thanks for the video btw awesome content :)
Thank you, @Ryguy12543 !
great video...tks
Thanks for watching!
Very informative video, thanks a lot!!! Dropped a sub :)
Thanks for the sub!
Nayshhh
🙏🏼😎
It's cool but if you're building this stuff for the web, using textures just isn't going to work, due to how large they are (if you want good quality).
Procedural generation using shaders is the only way.
You’ve got a good point, and if large textures are unavailable, a load progress indicator. ☝🏼
@@robotbobby9 for sure - but if your loader is for 50mb - you ain’t keeping your customers :)
Cute!
Thanks!
the matrix is made with threejs
Is that a suggestion? Make the Matrix effect in WebGL?
😎
@@robotbobby9 yes and holograms too
Terrific video!!
Thank you, @javifontalva7752!
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
Great
nice
Thanks
Could Smesh!
thanks
is this a virus
🦠 How would we know? 😀
Thank you!
Please remove your face off of the screen or make it smaller, it is obscuring the code. 🙏
I will try not to do that next time, thanks!
@@robotbobby9 You are welcome.
Why is it in such low resolution?
You could find better detail online I bet. I used the *free* textures from here:
planetpixelemporium.com/earth.html
and they're all 1K only.