2.3 Cubes

Okay, okay, okay. We're well into this course, and there's still nothing to see. This is the lesson where it all changes. We're going to draw a basic cube. Let's tidy things up a little first. Let's chunk some of these things together into functions. CreateCamera, seems like a good function to do our camera stuff. Let's move this in here. Along with this position. Then return the camera object. We'll have to call this function if we want it to be used. And we can assign the camera we get back to available. Also, the render code is a bit messy. So let's put that in a function too. We just take the renderer, Setting its size, Then return it. Let's take the line where we append the renderer to the DOM element, and stick it in here as well. Call and assign this function to variable. For sake of consistency, let's add a createLight function, too. Just move our point light, Then its position, And return it. And the usual call and assign. Super, we've forgotten to add our cameras to the scene. This isn't completely necessary, as Three will automatically add it. But I think it's good to be explicit. Okay, now for our cube. Let's keep with our function naming and make a createCube function. In here, we want to create a mesh. A mesh is a very common thing in 3D graphics. It's a connection of vertices, edges, and faces that make up a shape. For example, this is the mesh for a dolphin. To create a mesh in Three, we need two things. The first is geometry. Geometry is all the information you need to draw a 3D shape. The lengths of the edges, how these edges connect to each other, all that kind of stuff. Luckily, we don't have to get too in-depth with that, because Three provides a friendly box geometry method that creates a geometry required for a box, therefore, a cube. All we have to give it is three values, the width of the box, the height of the box, and the depth of the box. We want a cube, so all these values should be the same. Let's make them 20 units each. Now, that's actually going to cause us problems, because remember, our camera's at 10 units on the z axis. That means the camera is going to be inside the cube. Let's move it back a bit by adding a 0 into this. That's better, now the camera will be able to see your cube. The second thing we need to create a mesh is a material. Materials describe how a mesh looks. What color is it? Is it shiny or dull? How transparent is it? Those kind of things. We want something simple to start with, and again, Three's got us covered with THREE.MeshNormalMaterial. All we need to do know is create the cube mesh with this geometry and material. Var mesh = new THREE.Mesh|geometry, material|. And the mesh is exactly what we want to return. Remember, before we see anything, we have to add it to our scene. So, create a variable called cube, and call createCube. Then add the cube to the scene, like we do with any object in Three. Save and refresh your browser. And look, a lovely cube. Little square, I suppose. Why do you think that's happened? Pause the video and have a think about why we're only seeing a square. So believe it or not, we're actually seeing a cube. It's just that because, by default, it's positioned right at the center of our scene, that's the coordinates, zero, zero, zero. And our camera is pointing exactly towards the center of the scene, meaning we're looking directly at one face of the cube. All other sides are there, but because we're looking straight on, we can't see them. If you're not convinced, then let's rotate our cube a little, so you can see the other sides. Now you may be used to working with degrees for angles. For example, to see the other side of a cube, you'd rotate it by 180 degrees. But Three uses another common method for working with angles, and that's radians. If you were to take the radius of a circle and wrap it around a circle as much as you could, the angle from the starting point to the end is one radian. I'm much more comfortable using degrees. So luckily, there's a simple formula we can use to compare between the two. Create a new function at the top here called degreesToRadians. This will take the number of degrees we wish to convert into radians. It's a one liner, so we write return degrees * (Math.PI / 180). To rotate the cube, let's go back down to where we created the cube. The cube has a rotation property that we can manipulate. Let's rotate the cube on it's x-axis. Cube.rotation.x = degreesToRadians 45. Save that and refresh your browser. Okay, we see another side. But because we rotated the cube along its x-axis, you may have been expecting the cube to turn to the right, instead of other way. The easiest way I find to understand this is to imagine a piece of string going straight through the center of the cube from left to right, this is the x-axis. So, if you were to rotate the cube, you could only rotate it up and down, which is what happens here. We're spinning the cube on a string. Similarly, to rotate along the y-axis, imagine a piece of string going vertically through the center of the cube. This will allow us to spin the cube left and right. If we go back to our code and copy and paste this link, and change the rotation axis to be y. Save and refresh. There you go. A lovely 3D cube.