Three.js Setup

[00:00:00]
>> So why don't we start with a simple exercise here. We're going to take this idea that we've already started with. We have a sphere. We're gonna add some texture to it. We're gonna make maybe an orbiting moon around an earth. And we're gonna learn a little bit about how to set up our scenes, how to set up our camera and controls and things like that.

[00:00:21]
And then also how to do some basic texturing. And you'll see this is gonna be very similar to the first three demos. So the concepts I'm about to show are very similar to this mesh demo, very similar to the meshes which just shows multiple meshes. And then very similar to groups, which we're going to be doing.

[00:00:38]
But we're gonna do it in a more fun exercise using Canvas sketch locally and bringing some images and things like that rather than just blank doing plain circles. So to start of, let's just pop on our sketch, we can set the settings to some default value, just clear the settings back to how it was when we started.

[00:00:59]
So just make it so that anime is true and context is set to WebGL which is gonna allow us to use WebGL. And then let's just walk through this a little bit. So we have a render, which is gonna allow us to render things. This is the sort of bulk of the three.JS engine.

[00:01:15]
We have to make sure we pass the same Canvas we're working with from Canvas sketching, and then we can change the background color. Let's use black. And this next bit here has to do with the camera. And so camera, we define this with a field of view, which is in degrees.

[00:01:35]
And so this first parameter, usually you would use some value maybe between 30, or 70, or 75, or 80, or something like that. The higher the value the more it's going to get stretched out. But the more you'll start to notice some distortion sometimes around the edges. So I like to stick around 50, or 45, or around there.

[00:01:53]
And then this next value here is aspect ratio, which we can leave it as one for now because we're going to update it when the scene resizes. And then we have the near and far values and this is gonna clip the object based on how close it is the camera or how far away it is to the camera.

[00:02:09]
So if you remember in, if you've ever played a 3D game, you might see these distant mountains and the mountains might sort of disappear after a while or as you go far enough away from a tree or something like that all of a sudden the tree disappears. That's getting clipped by the far plane.

[00:02:24]
And so if I was to use a low number here, we might not see our sphere. So we have to make sure that these numbers are high enough so that they don't clip our scene. So you just use 500 or 100 or something like that for now. And then this is the same concept, the near is the same concept, but it has to do with how close we are.

[00:02:43]
So eventually you'll see when I'm zooming in here, these front lines disappear and that has to do with the near clipping. So the larger this number the more likely we're gonna clip earlier on as we start to zoom in. So just so you keep in mind but we can leave it at the default for now.

[00:03:01]
And then the position, we set the position of the camera. So right now we're setting it to be negative four in the z-axis so that we can just look directly at the sphere. If we don't have this, it starts at 000, which is actually pretty useful sometimes, but right now, that's not what we want.

[00:03:18]
So we move that back so we can see the sphere and then we look the camera at the center. This line here just says look at the origin of the world, and you can try tweaking this to sort of raise the camera a little bit and maybe offset it on the x-axis as well.

[00:03:34]
This next bit here has to do with controls. So this is where we add in the interactivity, so the ability to click and drag. If you want, you can take all these control references, comment them out, and no loner will you see the interactive. But that might be useful if you’re creating just an animation that runs on its own.

[00:03:53]
You don’t want it to be interactive so you might want to take out these controls. Or you might want to use different controls. Like first person controls or track ball controls. Or some sort of other controls. These controls are part of an extension of three.js. They are required right up here in the top.

[00:04:10]
And this is how we can require different things from the three.js examples. So if I keep scrolling down we've got our scene, just a plain object. We have some geometry which is the sphere. And then we have a material which is just a wireframe red material, we can turn off wireframe to make it a bit more obvious.

[00:04:30]
Or we could set this to another material like mesh normal material. And with mesh normal material you don't need to specify a color. But you could specify flat shading true and then you have this, let's scene now. And then finally we just add the mesh to the scene.

[00:04:50]
We create the mesh and add to the scene. And this last bit here we don't need to worry so much about this right now. This is just a resizing the camera, resizing the render, and then actually updating the controls and dispatching this render call, which is gonna actually create.

[00:05:06]
It's going to take our scene, It's going to take our camera, combine those two things to actually create this image that we're seeing in our browser.