2.3 Creating a Shape

Hello and welcome back. In our last lesson, we created a scene, a camera, and a renderer for our three JS scene. But we still don't see anything interesting happening. So what I wanna do in this lesson is I finally wanna create an object to place in our scene so that we can actually see some 3D graphics in front of us. So when we're creating an object and in Three.js first of all an object is called a geometry. A geometry in Three.js is basically just a three dimensional shape that we're gonna place in our scene. So when we talk about a cube or a sphere, those are just different types of geometries in Three.js. So you can find the URL for our starting code pen here in the course notes for this particular lesson. And I've got that opened up. And I'm gonna click on Fork to create a new copy of it. And all the changes we make in this lesson will be saved in this new copy. So again, we have a scene, we have a camera, we have a renderer, next we're gonna create our first shape. So, when you're creating a shape, you need a few different things. First of all, you need the geometry itself. And in Three.js, the geometry for our shape is the object that contains or keeps track of all of the vertices of our shape. Now if you've never worked with 3D before, a vertex is simply just a point in your shape. So if you have a cube, you're gonna have eight separate vertexes or vertices on that cube, one representing each corner. So a vertex is basically just where all the edges come together. And the geometry that we're creating in Three.js is the object that keeps track of those vertices. The second thing we're gonna need is a material. Cuz if all we have are these vertices, then we still won't be able to see anything. What we need is a material to wrap around our object and to give it color and texture. So we're gonna have our geometry. We're gonna have our material wrapped around that geometry. And then we need an object that's gonna bring those two together, that's gonna bring the geometry and the material together, and that's called a mesh. So let's jump into our JavaScript code and see how this is done. So, first of all, we're gonna create our geometry. So I'm gonna create a variable here, and I'm just gonna call it geometry. If you want, if you want to get more specific, I'm gonna call this a cubeGeometry. And we're gonna set this equal to a new instance of THREE. And the way we create a cube is by using a Box Geometry. So, we're gonna do THREE.BoxGeometry. And in the parenthesis for a Box Geometry, we need three items. We need a width, a height and a depth. Now there are some other optional things we could add too but we're not gonna talk about that in this particular lesson. So instead I'm just gonna set the width, height and depth to 1 each. Since we have no other objects to compare it to, we can really give it whatever size we want to. I'm just gonna set the width, height and depth all to a value of 1. So that's our geometry. The next thing we need as I mentioned before is the material, so that we can actually have something to look at. So we're gonna create another variable here called material. And we're gonna set this = new THREE., and just as with many other aspects of Three.js, there are multiple types of materials that we can apply to an object. And for this particular example here, we're gonna keep it pretty basic by using the MeshBasicMaterial. And inside parentheses for this, we can include an object, a JavaScript object which is contained in curly brackets. And in the object we can basically apply some settings here. So I'm going to set the color of our Mesh Basic Material here. And the way that colors work in Three.js is they use hexadecimal values but you need to start that hexadecimal value with 0x. That's a lower case x there, and then the hex value. So if we want this to be red, we would say ff0000 after the 0x. And then we'll put a semicolon at the end of that statement. So again we have our geometry, which we called QueGeometry. We have our material, which we could call QueMaterial if we wanted to stay consistent there. But we just called it Material here. And then the next thing we need is our mesh. Now, for all intents and purposes, this mesh is going to be the shape that we manipulate in our scene. If we want to change the rotation of it, we're going to change the rotation of the mesh, not the geometry itself. So since this is gonna represent our actual shape, I'm gonna call this variable, cube. So this cube is gonna be an instance of THREE.Mesh. We're creating a Mesh here. And remember, a mesh is going to combine our geometry and our material together. And so inside the parenthesis the first thing we need is the geometry that we want to apply it to, which we called cubeGeometry. And then the second thing we need, after a comma, is the material that we want to apply to it, which we simply called material. So we've created all of the properties for our shape, now we need to add the shape to our scene. Now, remember our scene is stored in a variable called scene. So what we can do here is we can simply type scene.add, all lowercase here, and then the name of our mesh, which is cube. And you'll see that once we add that cube to the scene that absolutely nothing happens. And the reason for that is we haven't actually rendered anything yet. We haven't put our WebGLRenderer here to use yet. And we need to do that after we add our cube by pointing to our renderer, which we simply called renderer.render. And then inside the parentheses for this render method, we need to include the scene that we're rendering, and then the camera that we're using to render the scene. So we're gonna point to the camera as well and then semi-colon to end our statement. And once we've done that, you'll see that we still can't see anything. And the reason for that is when you add an object to a scene, by default it's going to add it at the origin at an X, Y, Z coordinate of 0 0 0. And since we didn't specify a coordinate for our cube, we didn't change its position. It's being placed there at the origin. The camera as well has been created, but we haven't specified where to put the camera. So it's just placing the camera at the origin as well. And since the camera and our cube are in the same place, we're not gonna be able to see the cube. So what I wanna do is I wanna pull the camera back a little bit, so that we can see it. So, after we add our cube to the scene, but before we render the scene, I'm gonna change the position of our camera. Actually let's change position of our camera right after we create it up here. So, let's point to our camera And there's a couple ways we can change the position. One way is we can say camera.position.x and set that equal to a certain value. And then camera.position.y and set that equal to a certain value. And then the same thing for the z coordinate. Or we can do camera.position.set and then inside parentheses include the X, Y and Z values. And when we do that, you'll see that our shape shows up. So again, the X position is first and then Y and then Z. X is going to move our object left and right. Y, our second coordinate, is gonna move it up and down. And then Z, our third coordinate, is gonna move it forwards and backwards. So when we move it in a positive direction along the Z-axis, we're basically pulling it towards us. If we move it to a negative number, we're gonna push it away from us. So we've pulled our camera away from the origin by five units and now we can see our object there. Now right now it just looks like a square because we are looking straight on one of the faces of our cube. If we wanted to see more of the cube, we could rotate it a little bit. So we can come down here to just before we add the cube to our scene, we can point to our cube. And we can do cube.roration.x, cube.roration.y, cube.roration.z or we can combine them altogether by simply saying cube.rotation.set. And then let's rotate the x coordinate 15 degrees, our y coordinate 15 degrees, and we'll leave our z coordinate at 0, and there we go. Now we see a rotated shape there on the stage. Now it's still not very interesting. We haven't added any lighting to the scene. So right now it just looks like some kind of weird solid red shape. But once we add a little bit of lighting, give it a little bit of depth. We're gonna see just how powerful Three.js really is. So let's save our work, and we'll move onto the next lesson.