Using the Three.js Editor

[00:00:00]
>> We are coming to the part that we are going to create our local version. But one thing I did not show you was the three.js editor. I just wanted to go over it really quickly. So, like the playground of Babylon.js, this is the editor of three.js. And what you can do is create a new file or start from something and you can add all of these shapes and lights are over here.

[00:00:41]
Ambient lights, directional lights, point lights, and you have different cameras. Let's choose a perspective camera and add a sphere. So I'm going to actually move the camera towards me. This is a good way of seeing, yeah, everything is created right in the center. So now I have the sphere, but it looks really black.

[00:01:15]
And we have the mesh standard material. So it does have a material but it's not rendering well. The reason is we are missing the lighting. So I'll create a directional light. And as you can see, directional light comes from one direction, and points to our object right here.

[00:01:38]
That means that it is going to create some shadows for us and if you want to create a more equalized light, hemisphere light will be a good option. And point light is almost like a candle light. So the further you go away from the light source you will have less power.

[00:02:03]
>> And, yeah, it pretty much works like a candlelight. So, [COUGH] on here we all we can also just click on the object itself. Again, it is grouped by the theme. And we can see all of its attributes and then we can change them here as well. And one thing I wanted to show you is how to add a little bit more interest to our very simple sphere.

[00:02:42]
So since we were talking about making the model's performance, one way is to cheat it using some interesting textures. And instead of having a detailed model of things, you can sometimes have the same effects by using materials and bump maps. And this material is included in the Github repository that we're going to work on.

[00:03:13]
So sphere is not very interesting but if we put an earth map on it, and now you have to click it to see it. So now we do have a earth, so you can add even data visualization on top of it. And for the bump map this is going to describe how bumpy it looks without having to add more vertices to our scene.

[00:03:42]
So I have this bump map included. So if we click on it, you can see that it already looks a little bit more 3D. This is very low quality but because of that it also looks like it's out of box. So I'm gonna increase a little bit it's geometry.

[00:04:09]
If you look at for every sphere, one thing that you define is the radius. So this is going to define how big it is. But also we have the segments. So this is how many times this is divided and it's going to affect the polygon count. So I'm going to increase this to maybe 12 and see how it looks.

[00:04:39]
I'm going to change the height segments too. So now because we have more geometry, also we have a smoother model. So if you're going for a stylistic thing you can still have a smaller segment count. So, [COUGH] all right. And let's go back to our bump map, and it is defined as one.

[00:05:12]
And if you go minus, everything that is supposed to be a mountain goes downwards. So you're inverting the bump map basically. And once you are done, what you can do is download it. You can publish it here. And I think when you publish it downloads automatically the end products.

[00:05:43]
I can now open this with an editor and show you the code. We have a index HTML which loads everything and I'm guessing it's the same for any kind of experience. But what you build on this experience is going to be on the app.js. So it defines a player that creates the render, camera, scene and all of those things.

[00:06:16]
But what it does is it looks at a configuration file, which is app.json over here. And if you change any of the attributes, it will be reflected on app.json, and this will use that app.json to create exactly what you created. So this is great that you were able to create downloads, a new experience and you have a way of seeing it.

[00:06:46]
But at the same time, it's not very readable code, because most important parts are in the app.json.
>> Can you round out the polygons, a chamfer or chamfer mild perhaps? Just to make it appear more rounded without having to add more and more polygons?
>> The question is can we make things smoother without having to add more and more polygons?

[00:07:14]
One way to do it is having a normal map. What bump map does for creating depth and height, normal map does something similar but it adds some, if you have something that's very edgy, it smooths out the edge. But it's a little bit more complicated to work with normal maps.

[00:07:45]
So basically what a bump map is, is a black and white representation, everything grey is going to be between height or no height. But with normal map, it is a little bit more complicated. That's one way. Other than that, for the mesh itself, there is no way of making it smoother without having to add any polygons, unfortunately.

[00:08:14]
Before you create more polygons, you should definitely try to achieve what you want to do with these bump maps. If you look at the corner, there's actually nothing that is sticking out. It's still very rounded in the corners, but the look of it is not the same. It looks like we can actually see the mountains.