React Magnificent 3D EARTH with THREE.JS | Beginners w/ React-Three-Fiber 8K Quality

⭐ Timestamps ⭐
00:00 Getting started and What we are going to create
02:40 Project Setup and Installing Dependencies
09:56 Rednering our First Earth Sphere on Canvas
23:31 Adding Earth Textures (ColorMap, NormalMap, SpecularMap)
34:59 Adding Atmosphere Clouds to make it feel like real Earth
40:40 Adding Surrounding space with fading Stars on the background
44:58 Adding sun light and making earth look more real to properly reflect light
50:33 Making earth rotate around itself day and night shift
56:43 Let's Create a simple landing page with our Ginatic rotating earth



🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero build a real-world app

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[davidhernandez]

Thank you! What would I need to do to add the funcionality of clicking on one country on the 3D planet and displaying some information about it?

[RossPfeiffer]

can info popups be combined with this globe?
popups with pointers to locations

[eli]

Great content!
Can you please share a link to website you got the photos from?

[luigihard]

how would i add pinpoints on the globe?

[sebastianullrich]

"Drei" is spelled like "dry". Awesome tutorial, keep it up!

[neelthakkar]

How about a tutorial on AR.js with web. It would be a great project🤩🤩

[Limestarz]

Anyone else having the problem where you can't see anything at about 23 minute mark? It's like my Earth component isn't being read or something. But, if I copy all the code from Earth into my App.jsx and put it inbetween Suspense it works. I don't know why that is the case.

[subhashparwani]

sir Can you create the card component like gnews API with the help of pure REACTJS ? please

[parhammoe]

Wonderful Video but, you are saying so many times. it gets annoying

[TriLe-zxub]

Thank for your videos. I have a question.
I have a obj and hdri background. I can not keep obj when rotate background. Can you help me resolve my issue?

[avatr]

Is there a way we can Make things in Blender like a whole landscape and add that to threejs

[poul]

Sincerely, love your video. Thank you a lot for great explanation and tutorial!

[hirisraharjo]

This is awesome. But is it possible to click an island/region ?

[TheCreativeRio]

Really awesome content for starting 3d world in web

[AIArtistTunes]

just use a group not 2 refs bad practice

[figgsboson]

great tutorial thank you! btw, how do I smooth out the texture wrapping? there is a very obvious line on my image of earth and the clouds and I'm not sure how to make it overlap to make it continuous, rather than looking like a 2D image wrapped around 3D sphere. I've been searching for a "symetrical" photos but there's gotta be a way to do it without that right?

[madara]

loved the tutorial, i know i am late in party, but still looking forward for these types of tutorial from you, good work man, keep it up !!]

[Morax]

Thanks for the awesome tutorial... Also drie is pronounced more like "dry" than "dree"

[fahimshahriarsawon]

more, video on Three.js .please.
Always, belive in Allah.

[adityaranjan]

Will you please tell me what are the dependency we have to install for @react-three/fiber, i am using react 17.0.2 but still getting typescript error after installation when i try to use canvas @CoderOne