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

hi everyone in this video we're going to create a 3d earth all on reacts with 3gs so if you're actually a big fan of 3d renderings especially on react itself with 3.js and if you're not familiar with 3gs it's pretty much like the mother of all 3d works on the browser and if you're all interested in that this basically video is for you so we're going to get started from scratch just like celebrate projects and getting started of course with getting actually our first scene and just like having it you know space views in here with stars then we can have our earth in here of course we can we can control early using mouse and we can add some really cool lighting like physically based right in as you're seeing here like it all works really well with like how sun works and how like pretty much earth rotating this is all being rendered 60 fps behind the scenes on the actual browser itself so this is not a video this is this is just basically being rendered in real time so that's what i'm going to be doing throughout this video and of course eventually going to create this yet simple but powerful and really cool uh kind of like global warming uh landing page for you guys just to understand how to put all of that together with this like canvas and how to make it work all nicely together with 3d gis or with 3d work with 3js and react and plus reacts fiber so stuff i'm going to be using of course you know obviously we're going to use 3.js in here and of course it's it's an awesome place and of course you can learn about it and how it works with all these awesome examples it provides on the homepage and most importantly we're going to use it with actually the bounding of react 3 fiber so this is going to allow us to use 3.js with react and we're going to turn the declarative like vanilla javascript 3.js to use it with a components based react ecosystem and of course we're going to redo our scene using components we're going to render everything using recomponents pretty much like meshes i'm going to rewind we're going to enter textures of our earth and you can control it all using react so that's the coolest part about all that and we can have it all working in react with no bottleneck with no performance issues no downgrading performance or anything like that it's going to work the same way as it would work on vanilla javascript with 3js basically the same way so i was going to be doing throughout the video hope you guys enjoy this one and without further ado let's go ahead and jump right into it [Music] so let's go ahead and get started and first things first we want is actually to set up a project and basically we're going to be using create react top cli to get started and set up and create our react project so as we always do we pick up terminals so whatever your windows mac or linux you got a terminal there and they can go ahead and like install the cli of query x app if you've never set up a project but hopefully you did if you did not just google query top and it's going to give it straightforward to the point so all we need to do is go ahead and do create react up and we need to provide it with mpx so just mp is going to like provide this uh buy for us it's gonna download it on the fly and execute it for us so we're gonna have it right over here and we can name our projects whatever everyday create a project you're seeing here i'm already inside of the projects but i can i can name this like whatever like react 3d or something click enter and this can actually go and install all dependencies for you create the whole project and boom you're good to go so i already did the whole steps in here and already opened my favorite projects here throughout this code so let me just going to close all of these just to go ahead and get started from scratch and for you guys to be able to see everything on life so here what we got is it's just a basic project seriously i got the projects running already so if i go into port 3000 which is run by default by query up top we get hello 3.js so that's basically what we got for this project it's a pretty pretty simple project and it doesn't it doesn't have anything to go forward or anything just pretty simple stuff just like hello there uh 3js and it's being rendered so we can get started with this bare minimum projects and we can actually first install dependencies and we can just go ahead and build the whole kind of canvas and start rendering through all this canvas together using reacts with 3js so first things first we're going to use reacts 3 fiber so as i told you before reactive fiber is actually like the connection link that like links pretty much or allows 3gs to work on reacts and it just like makes it looks way much better indeed what does this like library or kind of binding what does it provide for us it actually makes 3js more of component components based sorry so it's like more like it becomes compositional kind of like in the behavior of compositions so you can use 3gs instead of like the the declarative api if you go like for example uh you do new you construct something like you construct a scene or a camera then you can do like set position or something like that you know this ugly stuff to go ahead and get started or pretty much work with 3.js but using the react3 fiber it's gonna last to you three genes but in a way of like components so it's gonna just like turn these into like components and whenever you render these components are gonna be automatically initialized for us which means they're gonna create an instance for us then we can supply like whatever arguments that can be supplied through this initialization or initiation states and we can of course control this all throughout props which makes it super super easy to control and you can see and you as you will see throughout the video so as we create the projects as we actually render stuff you're not going to see that much of complexity as you would when you just deal with vanilla javascript 3js yes it's going to make it much simpler for us and it's going to like straight to the point throughout components and we can provide some props and that's it it's going to make the magic happen for us behind the scenes everything is being dealt behind the scenes for us all we have to do is just like you know put our components together and sit and enjoy so as i said before first things first let's go and install the react 3 fiber so let me go to my terminal here already open up another one let me just go ahead and close this because i don't need this anymore i want to create a new one for you guys to be able properly to see what i'm doing so i'm going to do yarn add and i'm going to do at react 3 and forward slash fiber so this is actually the fiber that's going to also use the components i've talked about before there is a second one which is a little bit more like interesting and it works with this one as well and it's and it's indeed from the same maintainer i don't know how to spell that name actually but yeah it has actually a really cool library that you can check out uh here on his page but what i'm gonna use is called like 3 i don't know if i'm like spelling this why because this is a like 3 in german so who i'm not sure exactly if i'm spelling this right but i'm just gonna you know i'm going to spell it as a tree that's it pretty simple right so what this one is allows you it's actually like a set of components that are already built for us and they are reusable then we can use it with our 3js throughout reacts fiber and it's pretty cool for example you can use like a camera shake which it makes your camera like tilt here and there if you just like you know familiar with these games horror games or stuff like that where your camera is tilting and stuff like that you can have these effects you can have a bunch of stuff like orbits you're going to be using which allows you to pretty much like you know move with the mouse and move the camera and explore the word there's a bunch of stuff in here like effects mask shadows tons and tons of stuff and even shaders you can use those alongside that as well so it all makes it super simple and it gives you these components already ready made for you all you have to do import them and you use them inside of your scene and inside with like 3.js and that's it all right that's sweet so that's what we're going to be installing too so i'm just going to copy react3 and hopefully i'm spelling that right too so i'm going to put it alongside that do your own add go ahead and add both of these and yeah that should be all good to go the other thing which is of course optional we're probably just going to need it one search just like twice all right so i'm going to use star components you know me i love stock components just make it super easy to go and control and put css in js and just you know add some stylish stuff to your application in general so what's going to be doing over here we're going to do start components and that should do stuff for us start component as well so as i said i already did all of these steps again and i installed both stock components and it did pretty much go and install all the other libraries so we are good to go in that particular part let me go ahead and move back into my first terminal in here and we are actually go ahead and get started so it's quizzing i already created like a canvas container which is just like taking full width and full height and this is just like for taking the full width and the full height of the webpage so if you're taking a look on one of the specs and elements in here it's clearly see the root as well is actually taking full width and full highs so make sure both boots html and body all of them are taking the full width and the full highs otherwise it won't work for you what i mean by this make sure to go into like the index.css or whatever and make sure that all of these elements in here like the ruse elements like the top parents which are html body and roots they are all taking width and height of the full web page otherwise it won't work for you and you just like it will be a little bit ugly for you to go and control this and render out the canvas okay so make sure this is this is working properly and this is being said throughout the css sweet so let's go ahead and get started first and let's go ahead and start with our scene so with the react fiber what we need to go and get started with is actually start with building out a scene so let me just going to clear all of these i don't need this anymore i don't need that all i need to do is just like my blank hello 3.js window and we are actually good to go so first things first the scene i'm going to be needing is actually to use a canvas and the canvas needs to be imported from like the react3 fiber the fiber library okay so i'm going to go ahead and use the canvas hopefully this works with um i don't think this does work so we're just going to manually do this i can't use the superpowers or vs code anymore but anyway so we can do canvas from appbx and we can get to fiber suite so i can go and put the canvas and make sure to put the canvas and everything all the components that uses 3js or reacts fiber or reactory anything related to 3gs has to go inside the canvas otherwise it will fade with you and it won't work properly okay so make sure that is actually working fine and what we need to do as well providing in here we're going to use suspense and suspense actually a react feature that allows it to fall back into something like a ui while another another piece of your reacts or piece of vr application which is just a piece of your ui is being like held out which means it's having some like asynchronous operation and it's waiting for this operation to finish in order to render something so this just like provides you with a loading state if you if you think of it so if it's if this this kind of piece or this kind of like part of the ui is being loaded in this suspense is going to provide with a full back you say oh this is loading or you can render out you know a dam for a 404 page whatever but just like uh it's going to provide a little full back and the most important part here what we need to use it with the canvas because the canvas most of the time needs to like import some textures uh import some models and all this stuff like you know works with 3d uh kind of stuff and 3d stuff like 3d models and theory textures are quite huge when it comes to size and bundle sizes so yeah falling back is is very important make sure to put the null because you can't render something as a div because you're already inside of the canvas so just provide this gnome and you're actually in the safe place to get started sweet now it's going to create another component and this component is going to be responsible for rendering out our earth all right so let's go into the src in here and i'm gonna just like put for example uh components and inside of that i'm gonna create another one i'm gonna name this earth and inside of this i'm going to name this index.gsx so this is going to represent our earth our little teeny tiny earth and we can go ahead and get started with it so first things first important we react as always and i'm going to explore the function which is going to be earth okay hopefully i'm spamming earthwise i need a props there and that's pretty pretty sweet now for earthen here actually the most fundamental thing that we need to start with is actually putting some specific mesh hopefully if you're familiar with already with 3js that would be all easy for you if you're not just go ahead and like try to focus closely because they are not super complicated stuff to follow but if you're just like totally newbie to like game developments or like 3d graphics development and all that sort of stuff you don't know what mesh is or the vertex is and all that sort of stuff like just down or low level basic stuff i really really recommend go ahead and just like see the guy 3.js is providing there's actually a pretty basic getting started guy there that which is just going to pretty much explain to you like what is the mesh where is the vertex um like how rendering works where is webjl and all that sort of stuff because those are much much more like low level that you need to understand before jumping into the more like intermediate and advanced stuff and being able to follow even though you're actually covering beginner to intermediate stuff but still you need to understand those low level kind of definitions and how pretty much the whole rendering engine is actually working behind the scenes hopefully that makes sense okay so as i said before earth we need to go ahead and render around our first thing and we need to render our first mesh which is gonna be just a sphere that's that's it earth is just just a big giant sphere even though most of people and i know scientifically it's not a sphere it's it's more like an egg shaped yes we totally agree on this but most of the times i mean all the times earth when it comes to 3d rendering all that sort of stuff has to be rendered as a sphere because it makes more sense and it makes it look way much better and it just like makes it easier to manage and manipulate and that's what i'm going to be doing right here so i'm just going to do a return and for the return here i'm going to use the fragments and that's just basically because i want to render or group a bunch of stuff and you can't hear as i'm saying again you can use a dev because a canvas can't have a div it has to use webgl and has to use like you know specific context rendering you can use the primitive html kind of elements inside of the in the inside of the canvas you have to go outside of the canvas in order to be able to render those hopefully that makes sense now what's going to render the mesh as i said before now for the mesh basically what you need to do is actually go ahead and like do um you don't need actually to import anything from the react fiber or anything because react fiber as soon as you put the canvas in here and whatever tile that comes inside of that canvas that gets rendered it's going to automatically provide you with this giant that kind of standard elements are going to be provided on the global scope so for example after you're familiar with whenever you put dip in here you need to import dev to put it because that's already actually being available in us on the context or the global scope and react's already familiar with that and that's the same thing with 3js react is already familiar with 3.js's components that are already provided on the global context or the global states or pretty much whatever you want to call it okay so i'm going to use mesh in here and mesh is actually just like a number of components and one thing actually to notice in here is actually like all the components that you need to put in here on 3.js are actually lowercase or camel casing components and they all start with a lowercase you don't put like mesh in here like m as a capital case because that's that's bad it will just like take this as in a third party components now we have to put it as a small or lower case in order to understand that oh this exists on the global context so yeah we're going to look for it in there sweet so this is the mesh now a mesh has to have actually a couple of stuff a message just like whatever kind of arbitrary geometric or whatever something that you call like it can be a cube it can be like a sphere uh it can be anything like a plane whatever so that what mesh is it measure has like a set of vertices which are just like points around the the 3d space and they just like gets connected together with specific lines then you can of course draw over them and you can color them and you can do all those sort of stuff so that's that's basically what it is the mess just like a gigantic kind of uh connection between different vertices or points that's it now we need to tell it like which kind of geometric we want to use and we want to use a sphere geometric so i'm going to do sphere geometry and here this is actually where the interesting part comes in so the sphere geometry in here what it's going to tell it it's pretty much going to go in and like create a geometry which is just sphere geometry of course you know how a sphere is it has like a radius it has all that sort of stuff so throughout the arcs property here we can go in and provide it uh with that so the arcs prop gets actually sent to whenever we actually initialize so i said before whatever you're putting here sphere geometry it's pretty much the same thing as we're doing three new sphere geometry so like we created a new instance so that's basically what we're doing in here so we're actually initializing a new instance of the sphere geometry and the arcs prop in here is actually whatever gets passed through to the constructor we are actually initializing which is the sphere geometry constructor so here actually if we take a look on this and july is provided us with this so it takes first as a radius which is a number which can represent the radius of the sphere then the width segments and the height segments so those are just like you know segments of sphere from familiar with how spheres are actually rendered or how spheres look like and it's like a geometry word well they're actually it's like composed of width and high segments and that's it so the ideal way to do this uh let's say i'm gonna put it less at three uh or or um i don't know let's go ahead and do one let's start with one that's the basic and by default it has a 32 by 30 and that's going to make it a pretty perfect shaped sphere so we're going to go stick with the defaults because that's the best approach to follow in this case sweet now the other thing we need to provide with the material and what a material is it pretty much can be like a color it can be pretty much like how pretty much this the sphere or how this 3d object is going to behave to light so that's it you can you can pretty much think of it like a material let's say oh there's this sphere which is like a metallic sphere and you know metallic is like it's super glossy and has this glossy material so let's say if you want your sphere to look glossy you need to assign it with like a metallic material and this metallic material of course is going to be defined by a custom shader of course you can create your own custom materials but likely for us 3ds comes with its predefined materials and you provide this with us with its predefined shaders so we can go and use this in the pretty much the simplest way possible now to get started with this one we're going to use um this the mesh fung material which is just a basic material that pretty much provides a fun kind of type of material and we can of course go in and tell it whatever color we want and let's say i want okay i want my sphere to look more like a red if that makes sense okay so i want just like a red sphere just roaming on the shiniest there and that's it that's all i want so i'm going to go in and render my earth so go earth and put it right over there and that should be able to render it so if you take a look there you go so as you see we got our first view being rendered and if you're wondering why we don't see red why we're saying this pitch black it's not red right even though we assigned red because there is no lighting and lighting is pretty much the most important thing in 3d world if there is no light there is no color and if there is no light we can't actually see anything in the world imagine yourself like without lies imagine there's no key lines actually pointing to my ugly face here i'm actually trying to actually explain something you won't be able to see me right yeah i don't know i'm being i'm being douchey right now but whatever so that's what i'm trying to explain to you so white is very very important in 3d world and it's very important on 3ds word and in fact 3ds provide this with a simple way to actually go and add white into our scene in here and be able to align in the scene so the most basic light the lighting source you want is actually the ambient light so it's just cold like this is it called ambient light and it provides you with just like an ambient kind of type light so i can go and use an ambient lines now for the ambient line here what it does it just pretty much provides a line that fills every single spot of the whole 3d world it's not like directional like a lamp or something that's what we're familiar with and that's the type of light you can think of ambient light it's more like sunlight because it's everywhere even though sunlight is not everywhere it's more like a point light when it comes to space but when it comes to us on on earth we're pretty much as an ambient line sunlight is more like an ambient light source because it's everywhere literally sweet so that's what i'm going to provide right here and for the ambient light what i'm saying in here is actually i'm going to give it for example there's an intensity okay i want to give it an intercity of like 0.5 or something i don't want it to be too much just simple and there you go we got our red sphere pointing our faces right now and that's that's looking pretty great right it makes sense now like why red is red right now if it could look gonna increase in the intensity yeah it's going to make it look a little bit more red but we won't be able to actually notice that because there's no difference in shading or there's no shadows and you know lights is just covering every single space of the word and it all looks the same the same color there's no changes sweet so this is the basic scene and this is the basic stuff that you should actually cover whenever you actually start a 3d rendering and that's that's basically what you need to do especially using reacts fiber that's it that's all you need to provide to actually add a sphere into your 3d scene how simple is that now if you take a look on our sphere now how can we make this red sphere look like earth right because earth has a lot more interesting stuff going on then there's like red everywhere so how can we make it look like that and this is actually going to happen using the help of textures so anything you see in a 3d game or anything you see in a 3d word kind of 3d rendered word it pretty much is composed somehow some way of textures and textures actually just like you know 2d images that gets applied into a 3d space and they can cover up this this particular spacing in different like patterns or um you know there's actually specific methods to cover it this way and here i already got 8k textures of our earth and and pretty much have been able to get this from a really cool website hopefully we got this and ak it's going to allow us to zoom in and see little teeny tiny details about our earth about continents about countries and all sorts of stuff and there's actually different type of like textures you know different types of textures so the first most important texture is actually the color texture and which you can of course take a look on ak and this is what uh what a normal texture looks like so you got like you know earth in here and that's that's what earth is that's what uh you know geographical card looks like there is you know continents in here for example africa american all sort of stuff and yeah it's not it's not geographical uh lesson for today but whatever so that's you got a point so this is pretty much called like a color texture and we got different like type of texture set before for example there is the normal map which actually pretty much gives you the bumpiness and makes it more like realistic where it just like puts it in more bumpy for example where the continent is it's pretty much like a little bit higher than an ocean where the water is so it makes it a little bit more realistic and there's this specular map in here which pretty much gives it like the glossiness and all sort of stuff i'm gonna apply all these different kind of textures together and using some specific shaders and materials and all sorts of stuff and gonna make it look like earth shining up super sweet so that's we're going to be doing right now and there's actually different different stuff in there for example night map so this is earth on night if you want to use it but i'm not going to be using throughout the video anyway and there is another one which you're going to be using which is the clouds so those are actually clouds kind of diffusion throughout the whole earth atmosphere and that's what i'm going to be doing is to make it really really realistic so we're going to be adding all of these types of textures together to form what's called earth so we're going to get started and first things first to start with this we need to actually go in and load every single texture of these so to do that i need to first load them into uh pretty much my my file in here use the import and everything because create react softworks really well with this and imports images really well using webpack and everything so that's that's we're going to be doing right here so import earth day map so earth day map and i'm going to go back to i think it's i don't know so i need to go back one more time then go assets and textures then i can do daymapped.jpg so i need to import all the other type of textures so we can use them properly uh there are actually a bunch of them so you can for example they um there's the normal map and there is um the specular map and we need the the clouds map okay so clouds i'm going to do earth clouds specular and normal okay sweet so that's that what we need in here now let's go ahead and use uh the help of like react fiber to use a custom hook made for us to actually load those textures and of course those texture are going to be loaded from a server once they are actually put in a public folder because that's going to be happening here i said before because this uses webpack and everything so that's that's how bundling works with that with that kind of stuff so after we load this of course they're going to be loaded in synchronously we can put them directly into like material and we can render them sweet so let's go ahead and do this i'm going to select name this for example um color map and i can do the second one is a normal map there is a specular map and last one is there is a cloud map and i'm going to do a used loader which is a hook i'm going to import it from react fibers in here so let me just put this a little bit on the top there now the first one it takes is actually takes what type of loader and we have to tell it with a type of loader and indeed we're going to use a texture loader which can be imported from 3.js and you have to put it the texture loader otherwise you won't know what type of floater because there's different type of loaders like mortar loaders or jltf loader and all that sort of stuff so i'm going to use it this way to load that and here we can give it pretty much what we want to load on an array perspective i like the input so it has to be the same one so we just like to match this so auto has to be the same i'm gonna do earth day map and then earth normal map then earth specular map and last one only is the earth okay or is that clouds map sweet now it's going to use this in here and the basic way to go and use this we're going to use the mesh standard material which is you know a third like already provided with us material from 3js thank you 3.js and this is more like a physical base rendering kind of material so if you're familiar with this keyword physical base rendering or pbr well this material is for you so this this is basically what modern days engines like web engines or pretty much game engines actually go use as an approach so this more like renders depending on the actual material that's it's pretty much being reflected in light for example there is actually this this sphere of metallic i said before so if this is a sphere of like i don't know wood it would behave a little bit differently when it is metallic because metallic is more like glossy and wood is more a little bit more rough so the light will be different whenever it hits the surface of both of different materials right so that's that's what i mean here so it all depends on the physical like material that is actually being hit and diffused by the light so that's that's what i mean by this so i'm going to be using this mesh standard material and that's going to allow us to do that and we first need to provide it with a color map so the color map in here we can do the color map and we can just kind of straight through uh provide the color map and i think this should be called the map instead of a color map and there is actually the normal map so normal map and um so just like both of these can be provided in here we can't provide much of stuff in there and to actually use the other kind of stuff like for example the specular map we have to go ahead and create or provide this on the mesh found material so here it is going to clear out the color because we don't need to put an overlay over our like earth because we don't need to make earth look right while it's blue sweet so for this one we need to do like specular map and we need to provide the specular map right here sweet so that's that's basically what we need to do for the first thing and let's go ahead and save that let me go back here and there you go it looks pretty sweet already and if you take a look on it seriously we can't move of course but it looks like earth right it's a little bit closer to earth and yes it does a little bit look like earth and this is this americas uh they both exist in that so that's pretty sweet we actually a little bit closer to our first thing to get started with that now how can we actually make a little bit more that as clearly now we can't pretty much go ahead and move this anywhere it's a little bit kind of ugly right we can't we can actually move to explore the different size of earth and it doesn't look like an earth because you can't move it around how can we how can you actually interact with this and move the camera because the camera right now is actually kind of static and this is where it comes the react 3 dry or dream sorry if i'm misspelling that but okay so that's what we need and actually we need to import the orbit um component so we can do orbit controls from react so it's going to be a reacts 3 3 all right now this orbit controls it allows us to actually do kind of an orbit for its name it's pretty much obvious so it's going to allow us to orbit through the whole world and actually moving the camera however we want it's gonna give us so much control uh over how can we move the camera zoom in and out panning and out and all that sort of stuff so you can go ahead and put it and i can put orbit controls in here and there are certainly different parameters you can enable and disable to make this work for example i want to enable zoom so i'm going to put this true and then enable pan so i'll enable this true enable rotate to rotate the actual objects and make this true um now for the zoom speed and everything i want to limit this a little bit i'm not sure i'm going to give you this 0.6 so i don't want this to a little bit a little bit more like speedy or stuff so i want pan speed for example 0.5 as well and the rotation speed i don't know i want to make this a little bit more realistic so i can do 0.4 or something okay so i should make it look really really great when it comes to that for orbiting in here and there's actually another prop we need to provide which is a target and the targeting here tells it like the main target is actually should you know orbit through and rotate and all that sort of stuff like where it should point now we can have it in different places right now right now for our sphere or for like main earth in here we don't have much of stuff going on right it doesn't have any kind of position and now it should work because they both to zero zero zero zero on x zero and y and zero on z axis and they should all actually work as expected so let me just go and show you that guys and see how that orbit works uh okay compiling that's good and if you take a look in this we can already orbit through this we can zoom in and as you see it's quite high quality right uh yeah it because it's aka and you can zoom in however you want you can see the tedious time details and it's not even fixated or whatever and that looks pretty great you can see the electric and all that sort of stuff you can zoom in you can take it over here and there and that's that's earth right yeah we can see earth from that perspective so let me just go and take that off a little bit and yes we can actually play with earth and that's that's looking absolutely amazing sweet so let me just gonna do one more thing now we've got the actual way to zoom in and move earth and we can check it out however you want that's pretty sweet now what we can do actually again is actually add what's left of this which are the clouds now as you see it looks like earth but it doesn't really look like a real earth because it doesn't have clouds it's it doesn't have this way of reflecting sunlight and it doesn't have this metallic look where it reflects some sunlight because uh pretty much has like i don't know if i remember right there is actually 71 percent of earth's surface is almost all water right so water actually reflects it a little bit kind of like glossy when it comes to light so when there's a lot of light shed onto water there's this glossiness comes through it's not really that much of rough it just like behaves almost like metallics and all sort of stuff so that's what we want in here i wanted to look a little bit more like this way and like reflect this one so our deep consciousness or subconscious know the oh this is real earth right that's that's looking like earth so that's what we want in here so it's going to add first clouds and make sure clouds are actually looking absolutely amazing as we want them to be so for that we need to go in and add another mesh so i'm going to add a separate mesh and this one okay so let me just um yeah so this one i'm going to be adding the same thing so it's going to be a sphere geometry it's going to be the same thing as our earth in there they're going to have basically the same width and the same radius and everything it's like a clone of earth okay okay this is a sphere geometry so when i close this and what it needs i'm going to use the foam material i don't want to use like a standard or metallic material or like the pbr material because the font is just going to give it a single color or a single map and that's it's not going to do any kind of manipulation from that side so that's what i want from this particular perspective so for this i want to use the mesh fog material and for this one i need to provide it with a map now the map in here are going to be the actual clouds map sweet and this one we also provided with some opacity so i need to do some opacity and from this perspective um the opacity i want to just like make it you know a little bit transparent because clouds and if you see the actual what is that the clouds texture those are not transparent this is actually a jpg yes because it's not png it doesn't have some transparency and those crews in here from these parts where the clouds are absent those are black spots and we don't want to cover earth with black we only want to show the whites that's why we're actually providing this transparency to get rid of the black and only leave the white and just like have it dim in through that thingy okay i want to also do depth white to false because i don't want to do any kind of depth i want to make sure they are actually kind of identical if that makes sense and transparency yes i want to provide this to be true because i want to allow to use transparency sweet and that's both at least we need to use a side and here we need to actually go and import this from 3.js so i need to do actually import all s3 and the reason i'm actually choosing to put all this capital because that's how 3gs conventionally likes to name their main importance so i'm just like you know moving with uh the actual uh river suite so i've got three here and i need to do um double side and that's basically what i'm gonna tell it to do actually is actually render both sides even the side is not visible to the camera even though that render it it's it's going to of course take a little bit of performance but we don't have any kind of performance heavy going on just like orbiting earth so we can work with this really really well and it won't have any kind of issues sweet but if we leave it this way this mesh and that earth mesh that both the clouds mesh and and the actual earth mesh are actually on the same position so one will overlap on the other and we don't want to do that we want to actually go and have a little bit kind of like you know a position where we just like point it a little bit up we don't want it to have it this way so we want to make sure the clouds mesh is having a little bit more radius or a bigger larger radius than the actual earth itself because i want the clouds to be on top of the actual earth because that's how it works right like clouds are comes like above water and everything above the consonants and all that sort of stuff so that's pretty much the logical thing we want to put into place right there sweet so i need to for example do zero point or one point zero let's say zero zero point i don't know four or five just just a teeny tiny bit just to see this kind of difference and since we already have some opacity transparent going on that should be all good so let me just go see this refresh i'm not sure uh there you go so we got some clouds been actually working and it just like looks 100 percent much better than it was before without clouds yes it looks way way much more realistic and it looks like earth indeed it does look like earth it's curiously whenever we just choose there's clouds everywhere here and there and that yeah that's uh that's looking pretty sweet i like it i like it so far and of course you can tweak out a little bit from like positions and width and and all those kind of parts to make it look good depending on the scenario you want to use i'm just going to provide you with a bare minimum components and of course you can import in your projects and you can use it however you want sweet now what we want is actually to have like this is earth right and earth should live on space and we should have a whole web page in here covered in black and we should have some like stars you know shining in here like fading out and in and that should be space right so what's going to do this this should have been actually quite hard because we've got everything we need and we can just go to like the indeed.css so where everything lives in here inside of like the roots and the party so we can do for example go to like roots and since roots actually is covering pretty much every single space during reacts renders so we can go and do like a background color so i can do background color and we can add some background color so this is more like a a bluish kind of color we can take it a little bit to the to the dark and of course you know you could probably figure out a little bit of better space color but i mean yeah that makes sense right now as christy it looks like a little bit more like space but still we need some stars shining up throughout the whole area in here and they should like fade in and fade out and all sort of stuff and likely for us dre gives us this component actually ready made for us and that's pretty good of course we're gonna create this custom made it wouldn't be that hard because they all you need actually like some custom small um you know either spheres or something or circles because they are not going to be visible and they should like shine up with lights and you can render thousands of them with just like a loop function and that's it so yeah you can do it this way but i would rather go and use like a ready-made components that has props and well-tested and well-made up rather than built-in from scratch okay so we can go ahead and do this right here and we can actually go and do the stars and i don't know if you can go in and pour stars okay from trees i can do stars from here it's not stars stars and for sergeant here what it takes actually a couple of different simple props in here like for example the radius of every single star which is i said before is gonna be like more sphere for example you can say oh each star has a 300 like the depth of each star like how much far away of of the actual camera and everything star should be rendered i don't know let's say it's going to be um 60 or something i want it a little bit far because most of the stars are far away when it comes to looking them from from a camera from like a human perspective and there is for example the number of stars or the count and yeah let's say there should be 20 000 stars or something i don't recommend going too high because this is going to be like you know not really good in performance so just like keeping it small number will make you look good and the factor in here is actually the difference uh size factor so it goes for example from one to five in a random way so let's say i want to go from like 27 factors so maximum should be seven and it should do the job for us for the saturation in here i don't need any saturation because you know i don't need to be super kind of um saturated and it will look a little bit kind of shiny so yeah that would make it look good and last one is fading yes i want it to fade which can automatically create this kind of you know i don't know looking like a star when it fades out and fading like every single time a star dies or something or a new star borns you got the points i'm not like uh you know a guy who knows a lot about like how space works but you got the point of what i'm trying to say sweet if we take a look i don't know should refresh there you go we got our stars shining up and security huge huge number of stars they rotate with a camera whenever we rotate that and we got earth actually pointing through that and it looks absolutely amazing i i just like lopez how earth looks like in here and without stars now it looks a little it gives it a little bit more depth because stars actually exist and this feels more like space right this should like feel a little bit more like space and that should make you look good and the last thing that would make you look definitely like space is actually the sunlight that goes straight into the earth and of course once the earth is going to orbit on itself like every single time rotate every single day well of course life's position is going to change and the night shifts is going to happen if you're familiar with that but the point in here that line is going to make it look really good and in fact it's going to you know since i said before uh like earth is already having this kind of metallic because it has a lot of water inside of it so yeah that makes points and that will make it look really shiny whenever there is slice and of course sun is the type of light of like a point light where it shines uh lies everywhere from from its like center to everywhere around it so that's what a point light is you can think of it as a bulb if you're familiar with that so that the board is it's just like a point light that shines light throughout the whole room there pretty much wherever it exists in there sweet so let's go ahead and do this and we can go in and add this this line it shouldn't be actually pretty bad and because all being provided with us throughout 3.js and 3ds does a really really awesome when it comes to providing this kind of ways so we can do point line and i need to make this camel case and smaller case and for this one you can provide with color and everything so for example as we all know white colors is not yellow it's just completely uh kind of white and because we're going to be doing it right here yes so yeah we can make it a little bit more like a yellowish kind of color i don't know so let's try uh just uh just a little bit teeny tiny bit and actually make it look good already for the position of that okay i want to position this a little bit far away from the from the center position so this one should take a vector and a vector in javascript in here in 3gs world is just like an array if that makes sense so the vector in here for example i'm going to say oh it's going to point to the x-axis zeroing the y-axis and i'm going to give it a little bit depth uh on the z-axis so it should make it look a little bit good and the intensity side okay i know sun is pretty intense on earth so yeah we can we can give it like a 1.2 because the maximum it goes from zero to one usually but 1.2 should make it look quite intense if that makes sense sweet so that's for the point line in here if you take a look on this i don't know maybe refresh to see how that does excuse me we already this guy got this kind of effects seriously is this this kind of light is already here i'm not sure if this is actually familiar with you guys but yeah from this side there isn't much but if you just go to this side where america lives pretty much there is some light being shining so we can go ahead and do this and you can see the difference but getting rid of the ambient light because we don't need the ambient light and the ambulance doesn't exist in space right so there's only sun being shining out the the whole light it has on earth and other um okay so um pretty sweet it looks it looks pretty good excuse me there's actually a dark space in here or dark side where they are actually sleeping at night and there's the the side where it has some light and yeah that's that's looking pretty pretty interesting but it's cruising here it has some glossiness so it looks like earth it really does but i want to rather go and add a little bit of like glossiness to make it look a little bit more like realistic and add some pbr into it if that makes sense so we can do this standard material this is what we're gonna add all of that so we can do metalness and this one like how much metal it is i can do 0.4 for example and there's roughness so how much glossy it is so if one you're gonna be super rough and it will look quite ugly and it doesn't represent earth right so let's say it might be 0.7 or something okay we don't want it to be too rough and if take a look on it now it's a little bit more like uh visible to us and it looks 100 better right it looks really really good when it comes to this greasy the dark side yes pitch dark you can't even look at it and seriously whenever we move toward the you know the enlightened one seriously it unravels and it looks really really cool like a super super realistic and super sweet and of course if we move this point light thingy you you will actually get this effect and if you take a look on zoom in actually as this is actually an 8k texture so it's super high resolution as clearly it's super super high we can zoom in and we still see the teeny tiny details and if you actually can see whenever there's actually a light being shut in here uh because we're actually providing some normal maps we see these bumps and we see it a little bit coming up like those bumps in here so this makes it even more realistic so seriously there's those bumps in here it makes you like feel oh those are stuff like i don't know whatever you can call it like uh you know patterns or textures but yes it looks 100 realistic when it comes to that and how lighting is being shed now the last thing that you might want to add into this piece of art it's actually oil rotating and all orbits of the earth on its own self right so we can do this using the help of the actual um like frame loop or what you can call it that the actual rendering loop and this way we can do uh what is that so we can need to actually access the mesh and we need to have a reference on this so to reference this actually we need to reference it on a specific uh variable in here so we hold that and whatever actually there is some frame changes so every single frame we actually going to change the actual position or rotation of the earth itself so that's what we're going to do and that's how we actually pretty much can do it throughout this way to pretty much rotate earth or orbit the earth you know around itself so you can do const and we can do for example let's say we're going to do like uh earth graph and i can use use ref from react of course now here we need to provide it and as soon as being initialized and create another dom we can have it so you can do earthwrap and luckily for us what there is there is actually what's called the rendering loop where it's basically an endless loop that you know keeps every single frame fired up and executed and for pretty much rendering the whole scene and updating it so pretty much every single frame which is 60 frames per second so that's that's how much it happens usually that's how it is but of course you can tweak on the fps if you're familiar with this so you can tweak out how many frames per second there is but usually there is 60 frames per second and that's how much this is going to be running and it since it's going to run every single frame so it's going to have run 60 times every single second and likely for us it pretty much gives us this control throughout the react fiber and we can use it of course using um the hooks so what we can do is actually do a use frame and this is going to provide us with a callback so we just provided with a callback in here and this callback gets executed every single time like every single frame 60 times per second that makes sense so for this one there's actually a couple stuff it provides and the most important one is actually the clock so this clock as soon as the initialize is pretty much uh or 3gs as soon as it starts rendering this clock is going to be initialized it's going to like start counting from zero to endless pretty much as soon as you know the application starts so it's going to count in seconds and more like a float number so seconds and milliseconds give you like a precise number so like every single second is elapsed it's going to pretty much like you know bump this the clock is going to increase and so on and so forth so you can imagine this as a regular clock in seconds and milliseconds so i'm going to use this value to pretty much orbit or rotate the earth so what i can do is actually earth ref dot current and we can do rotation you can do dot y for example so we'll proceed the y um the y ruler so using the actual clock and we can do for example const um or i can do elapsed time and we can do clog don't get elapsed time and it's going to get us an afloat number and number of seconds since the clocks started pretty much so we can do like elapsed time and if you just like do it this way it will be super fast so i need to like do it like i don't know normalize this by six or something just divide it by say just to slow it a little bit down and make it a little bit more realistic if that makes sense so okay that that should be looking pretty great actually and if we do it um this way we got use frame and clock and everything now if we do mesh standard we got the reference already there so if we take a look on this there you go seriously it moves but not as expected because the actual earth is moving but the clouds texture is not so we have to have them both rotating if that makes sense so we can do this cloud's ref i can do use rev and we can do the same thing we did here so cloudsgraph.current.rotation.y and elastin if you're wondering why did i choose the y because the y is actually the one responsible for ordering it on as a regular earth of course earth doesn't orbit exactly in a y position like in on the y axis itself but that should make it a little bit more like clear for us because that's how it should look like to us as humans or to the human eye if that makes sense so divided by six in here for the clause ref and we need to provide that clause ref to the clouds so we need to do rough i need to pass in the closed ref and that should make it look good so take a look there you go it feels way much more realistic than it was before as you see now the light is actually moving as earth orbits and it's actually turning so seriously it feels more like um you know it's it's coming like a new day and this is naturally how earth is so it just like keeps orbiting on itself and nights comes in they kind of goes out and you know just like night and day shifts and this is pretty much how it works and this is how it happens and it looks pretty realistic right it looks absolutely amazing one-sided dark the other in in shedding lights from the sunlight of course of course you can have different stuff for example if you like want to have a moon just following this and orbiting through earth yeah you can have it that would be really good you can have some like small moon in here and there's actually a cool moon texture provided from the website i've gotten here just like google moon texture you're gonna find tons of them you can use it you can do this one you can practice your skills with this and you can see how you can go ahead and use it in this awesome way and of course you can you can pretty much use it anywhere you want and let's say for example we want to use this as a landing page right because that's the most obvious place that you want to put in rotating earth on itself you know it's tragic right but that's what you want to have is and you want to have for example on a landing page just to attract people and say oh it has some this pretty rendering stuff and pretty much basically maybe has some like relation to the actual topic and all that sort of stuff so that's what we want to hear so for this particular case what i want to do for them just a basic text on top of of like earth in here uh regarding global warming and stuff like that so i'm just going to do this real quick so what i want first go ahead and disable the orbit okay i don't want any orbiting anymore uh hopefully that doesn't break anything okay so yeah we can't we can't zoom in anymore so we have to do it ourselves and we can we can pretty much have some so let me just see what we can do for this to zoom in all right so we can do some mesh we can do some position or just scale okay i guess the scale takes a vector so for example we can do some scaling on zero zero or like three let's say how does that look like really unsure about this but let me just um put you know the same cloud stuff okay that's maybe that's too much maybe that's too little uh i'm sure about this spot okay okay all right so yeah that's um okay let's go and make this a position instead of a scale so we can make this a position we can make this a position and indeed we can have this both positioned a little bit like um closer just so is our lights so the point line so we can have for example this one is three this one is three and and the point lines in here i can have it as five if that makes sense and there you go it's now it's a little bit better it's big enough and it just like covers the whole thing and you can of course move in and out so that should make it some look pretty great right and you give us this really really awesome position so it's being centered and it turns itself and it's being orbiting everything so we can have some text on top of that and for this case what we can do we can for example go to so i want to make sure render this outside so for example for example name this for example like top section or something and for this one we can have like an index.jsx so this should be like a react renderer right so i'm going to export a function top section everything and what i can do um so i can do for example top section container and of course you can figure out however you want to do this i'm just going to give you like an example just a quick example how to use this properly so for the top section container what i wanted to have it's actually been covered the whole thing in here but because you already have some canvas so how can we properly align this and make it look as we want it to be it's just basically we want to do this and like have the canvas in the background or have the text in the top section container come in the foreground so it has to be on top of this so it has to have like a top position or an absolute position sorry or a fixed position if you want to so let's say i want this to be an absolute positioning and i want this to have full width and full height okay that should make sense now top should be zero left should be zero so i don't want it like moving in here and there or anything i just like all zero should make it look good and i want to give it some background so i'm on okay i'm just going to do like some black background and we might want to do i don't know what the best background should be i want to decrease the opacity as much as possibly could so just just have some like top layer of it that should make you look good uh hope so so i don't have some colors in here i want to do some like um title or want to call it logo maybe so h1 i don't want any margin so zero and what i totally remember here we need to do display flags and i want to align items both okay i want a flex direction to be column that's the first most important part and what i want on top here i want to align them to the center only only horizontally that makes sense now for the logo i want to do color to be completely white font ways okay i want to use a 700 if available and font size i wanted to say like 30 pixels because i want this to be gigantic right so i want this as big as possibly code from the logo and what we can have as well some slow guard tags just beneath it so slogan it can be an h4 or something just a little bit smaller um okay so margin zero color same thing font weights probably same thing as well and the fun size of course you should be a little bit smaller than that and without forgetting about the margin so margin top let's say i wanna have like 10 pixels 1am marching i don't know we'll see so here we need to return is the top section container and i want to do [Music] logo and for the logo in here for example i can do like global warming or warming or whatever of course you can choose that the right way for it and for a slow gun yeah i've googled some slow guns you know there's tons of them regarding global warming actually so people are really really hating about global warming so um i don't know so let me just i think that's that's looking cool because it has some uh cool wording in the middle over here maybe yeah let's let's try this one and see how this goes okay so let me just go to the outdoor gsx so outside of canvas make sure it's outside the canvas and we can have for example top section and we can render it and i think the top section hasn't been okay so lately it's not actually working pretty great with vs code or import not sure what the latest update did to break this but yeah we got some text in here it's not looking as anticipated to be of course but we can of course have it look a little bit better we can we can do some some stuff to make it look a little bit better so for example 55 pixels from the logo 30 here um maybe you want to do some um some padding from the top okay i want to do some padding i want to do like a 20 padding from the top i don't know z index do i need some z index to make this look good on top yes i might do and i think this is not looking as we want it to be i think this maybe is doing it maybe we need to increase this a little bit better or a little bit more i think a global warming is more like a greenish thing is it i'm not really that guy who knows a lot of stuff about these kind of stuff to be honest but all right maybe i think the the blueish color we had before is much better than all of these so maybe that should make it look good maybe we need to move this a little bit to the top like uh 15 or something or 13. okay and we need to do 60 pixels i mean that tank should be so big right and the text beneath it the keep it cool for safe living um i don't know maybe maybe that should that should be a little bit kind of bigger okay that doesn't need to be bigger i'm sure about this and that should only have like 10 pixels okay yeah pretty sweet and we can pretty much like have some text beneath that and look how does that look like even what we can have this as a landing page and how does does it make it feel for example we can have some button to click and to pretty much uh like help us achieve or cool off the word or whatever pretty much like a cool words we can we can add all of these in here for example we can do a paragraph and we can use child dot p and i can say for example a margin margin top to be like uh 1am maybe color completely white one size as 20 pixels maybe and online heights i want to have a 1.5 line height between each line and another and the front weights um we can do 500 maybe all right so let's see how that paragraph should look like so paragraph and we can do like for example uh you can help us cool off our word and have it go back to its based state uh ever by donating for example so for example you have like i say charity website that donates to global warming and just like has you know raising donations to pretty much fix this global warming thing and have more research and just like basically have the money to do and find global warming in general so having it this way with this cool background and earth orbiting for example you can have different effects for example you can have these custom shaders that makes this earth on fire basically i know that that's a lot of possibilities i'm i'm really like exploring all that but i just didn't want to go back through these details because every single detail is a little bit different than the others i just don't give you the whole uh kind of like openness and and like whatever you want to do with this you can find on my github and you can of course use it but i'm just going to complete this and see how it does by donating uh to help uh fix our only word and our i don't know i'm just like being a writer right now i don't know i don't want it how to light or something sorry if i'm being ridiculous but so in our beloved earth okay maybe i don't know okay that's too much i need to uh i need to go in and take this a little bit teeny tiny and i need to induce some maximum width to um for example i can do like forty percent is it uh let me do my text online okay all right so that is kind of like a lining text to the center and that's 40 that may be too much maybe i don't need to align text to that to the center maybe just install okay that doesn't look good center it is and center it is maybe when you have to have okay so i don't know we can add some other blah blah blah whatever in here uh i can for example add those words here let the eyes i'm just gonna copy this from google whatever just trying to being ridiculous just to make this style look as i want it to be right so here and for example we can have like a small button that you can click down there and i still don't i'm not really satisfied about the how that should look like and everything i mean that's still a little bit kind of gigantic text is it yeah i think that's a much better and much more readable thing and of course you can have this really cool button that you can click it and it does a really good job for example i can do like name this don't need button and we can do like style down button and we can get rid of like the outline on borderline and uh background for example color is going to be like a greenish kind of color i don't know uh maybe this this color here make it good so color you're gonna be wise fun size i wanted to do like 16 pixels font weights 500 um i don't know maybe the colors or the border radius should be something like uh three pixels maybe and we need some padding from left and right for example when i do like 14 pixels padding from left and right and from the top and bottom i want to be like uh eight pixels which is almost like half and uh okay let me see how that button looks like anyway and i want to have some margin so margin top is definitely like a 2 a.m or or 3 3 maybe okay so donate button donate save the word okay that's a big big word big sentence um okay i'm just going to donate maybe that's good yeah that's that's given us this cursor it's not looking as uh interactive as i want it to be should be the cursor that makes it look good and here i mean 700 should make it look much much better and this should be um 1 em or more okay that's a 10 pixel uh it doesn't feel like a 10 pixel thing it doesn't feel like i should do that and what i can of course do i can do like some border two pixels solid and for now they can be a transparent and of course i can add some hovering color just to make it look cliche of course you want your donate button to be super cool whenever people click on it they see that really awesome styles and really awesome effects going on here and there so that's what i'm trying to do in here let me add some transition to all to 250 milliseconds and easing it out and for that particular case what i want to do in more particular is um i want to have some like background dash color i want to make this transparent okay and for the border i want to make them the same solid and i want to make them the same color i used on top there all right maybe that will look good yes now [Music] yeah i mean i mean that's doing the job it's not the perfect thing i've ever made in the cotton buns now that's just a quick bottom kind of design okay a pixels uh okay all right maybe yeah maybe that's that's looking pretty great when it comes to donating in here and they can click on donate and they can do their donation and that should make it look good now it's much better it looks a little bit more like a interactive i need to remove the you know the exclamation mark that doesn't look really good and yeah we've got donates maybe the color isn't that good i mean that's what i'm feeling the color is definitely not really that good and now it's much better yay so yeah we go and slack over over that we get into this as we see looks amazing i i actually love this kind of idea of having this as a landing page for example and you can have it as that and all being rendered in 3d and people can just like come in through in here and see oh that's really cool that's that's a space that's earth and that's about global warming and they read your testimony in here read your like you know long ugly paragraph maybe and they say oh that's pretty cool let's go ahead no no it's gonna donate to global warming that's a good cause then you can point them into like another page to go through and read details about global warming maybe you can have like a list of what global warming could cause us and could cause the earth itself in the upcoming and coming decades or something like that that's a lot of stuff to do but i'm just going to give you the idea in here and hopefully it didn't actually take you too much of course you could have stu like pretty much completely skip that part but i hope you guys actually enjoyed this one and yeah i hope you actually enjoyed this like putting 3d with react 3d react fiber and 3js most importantly so if you actually like this type of video stories most importantly about 3d and having all of that i actually really really enjoy about 3d works and all of that indeed actually before going into web development more interestingly i was a game developer and was more like a 3d kind of developer where like having it low level in the engines and game game dev engines and all sorts of stuff so i will be very happy to do this kind of series in here in 3.js on the browser for you guys to actually find something helpful so i said before hope you guys enjoyed it and without further ado see you in the next ones [Music] [Music] you

Channel: CoderOne

Views: 7,528

Rating: 4.989717 out of 5

Keywords: React, Angular, Three.js, THREE JS, THREE js, Three js, three 3d, React 3D, 3D React, 3D Javascript, Three javascript, Three React, Reactjs Threejs, master three.js, master react, React 3D website, 3D Website, Threejs game dev, Learn React, HTML 3D Three, 3D Earth, 3D Earth React, 3D Earth Javascript, 3D Earth Website, 3D Rendering, Game development, web game development, 3D web development, React Three Fiber, React Three Drei, 3D Animation, React 3D Animation, 3D CSS

Id: ymavtyRpT0E

Length: 76min 45sec (4605 seconds)

Published: Sun Jun 27 2021