Animated 3D Earth Scene

[00:00:00]
>> We've been working with the online editors, but we have to run everything locally. So this is how we would start by importing as specific modules from Three.js and our Three.js paths that we are downloading is listed on tsconfig file. It is also looking for some of the Three.js's extra files, which is kind of confusing because they are part of the examples, not part of the package.

[00:00:37]
So I did add them for you. And if you look at our server, we have a very simple Express Node.js server and it is serving our folders for Three.js and extra folders of Three.js. And now I can type in npm run dev, which will run the type scripts and start our server at port 3000.

[00:01:13]
So now if you go to your browser and type in localhost:3000, you should see what we have here. I wanted to create the same thing that we have in the Three.js editor here. So far what we have is a canvas element most of time. The examples are creating a canvas element and adding it to the HTML.

[00:01:53]
I kind of think that it's unnecessary because HTML is so much more performing and it happens really fast. And having to run the JavaScript code to add another canvas if that's the only thing that you're going to do is kind of waste of the energy. So instead, I added to my HTML and then call it by getElementByID.

[00:02:24]
We have the PerspectiveCamera with the same settings and the Scene. Finally, we have the rendering. Let's talk about the antialias thing. This is what makes your 3D models not very square like, not like minecraft, so basically it smooths out the edges a little bit. And instead of adding a new canvas here, we are saying the canvas that you will use is this one that we selected earlier.

[00:02:59]
And we have a SphereGeometry and I use the radius, first thing is the radius which is 0.5 units. And then this are the height and width segments that we play with on the editor. After that we translate the position of it and define our materials. So for our material too, we were able to add wireframe on the editor, we can also do the same thing here.

[00:03:36]
So as you can see we do have a lot of polygons, so we can actually maybe reduce those. So we were looking at the antialiasing on our renderer. So antialiasing if we enable it, that allows our models, renderer actually to render less pixelated. So it will be less of the big squares and then smooth edges on the shapes.

[00:04:10]
So we have the renderer with our canvas that is already in our HTML. Now we have the SphereGeometry, we are running our dev server, so we can go ahead and see what is happening. So as you can see there's a lot of vertices we have to, well, we don't need this much.

[00:04:30]
So I'm going to lower the number of segments, Maybe 14 here too. And when we refresh it, we should be able to see less and still smooth edges. So this is good for our purposes. I'm going to comment out the wireframe. wireframe part is the part that is rendering the polygons instead of running a smooth material.

[00:05:08]
Here I have a random color generator, so every time basically I refresh it, we have a different color just for fun. And our earth Mesh includes this geometry that we just created and material. We have two functions that we are running, one of them is init function which we define all of the things that are necessary for the scene, that will run just once.

[00:05:37]
And the animate function, that's the function that will run 60 frames per second and we'll get to their definition below. First thing that we are setting for the renderer, the PixelRatio, we are using the by devicePixelRatio. And we are setting the size to fill up all of our screen with setting it to window.innerWdth and innerHeight.

[00:06:06]
And we are adding a new event listener when our maybe screen is resized, then we have to take the windows new innerWidth and innerHeight and re-render it. If we don't do that, we will have some distorted objects instead of the actual objects that we first created. I would like to keep the camera on 0,0,0 because whenever you are on a device like HoloLens or maybe some other devices also.

[00:06:47]
The person who is wearing it is the camera and they are the 0,0,0, they are the start. So everything that you create, you have to move it a little bit for people to see it. Because of that, I'm moving it on the z axis and adding it to our scene.

[00:07:05]
onWindowResize, again we are setting the aspect ratio of the camera and then we are updating the projection matrix. This is going to define where the things are going to be, how they're going to be projected with using the new aspect ratio. And setting this renderer.setSize window.innerWidth and height and render it again so all of these changes will apply.

[00:07:36]
We have the animate function. This is actually was supposed to be requestAnimationFrame, Function that is taking the animate again. The second one is for VR purposes we are going to use that in next one. If we are not in VR yet, we can use requestAnimationFrame and again, we're adding to the y-axis.

[00:08:09]
So it kind of turns in one direction that looks like Earth's rotation. And one thing that we are missing is light and you can copy the lights information here. Its the HemisphereLight and position is set outside of the center and then we add it to the scene. All right, we can add this light information to our init functions because it's going to run once when we initiate the scene.

[00:08:52]
And we saw what the bump map does to our Earth's geometry. This is a great example from the three.js examples of how you can use to render the details of skin. This is very interesting. If you take out the bump map, it will not look like anything like a person at all.

[00:09:24]
And now I think I want to go to the same materials. I'll just copy and paste this one to make sure that they are the same. So, Okay, I'm going to paste it here. For textures, we have to use the TextureLoader and load the files that are in here.

[00:09:50]
Well, we can just comment out this one. It's doing the same thing, but we also have to move material information up a little bit or move geometry down, all right? Now we have it. So we don't need the randomized color anymore. Few other things that I'm defining is specular on this material, which is the attribute that makes it a little bit more like a mirror.

[00:10:28]
shininess is how much light will be reflected off of it. And bumpMap as we saw in the Earth bump example, the same one, and we are defining the scale of it. This will change how much it's being applied. And we also have the texture now we are defining instead of using the editor.

[00:10:52]
Cool, let's take a look. Yeah, finally. We do have our 3D Earth. It's turning a little bit too fast. [LAUGH] It's dizzyingly fast, so let's lower the animation a bit. I'm just going to add another 0 here to the rotation.y. So we have a little bit more reasonable time passing in our new Earth.

[00:11:33]
I don't see as much of a bump map, it's not looking very good. So I'm going to increase the materials bump a little bit, maybe to 15 and see what it does. Maybe even much higher. All right, so it's up to you to decide how much of it you want to happen.