3.1 Spinning the Cube

Now that we've got our nice little cube, let's make things a bit more exciting by adding some animation. How about spinning the cube automatically, how would we go about this? Well the way we've been doing things up until now is that we create an object, add it to the scene. Then we tell three to render it, which makes it draw everything in the positions we told it to, to the canvas. If we rendered our scene, then changed the position of our cube, then we wouldn't see the cube in its new position. We'd have to tell three that something is changed by telling it to render the scene again to update the canvas. The best way to approach this is to create a draw loop. We should create a function that tells three to render over and over again so that any changes we make to our scene will be automatically rendered for us. Start off by creating a draw function, then inside call window.requestAnimationFrame. RequestAnimationFrame is a great little method that's built into modern browsers. It tells the browser that you want to draw something to the screen and it should call your function before it paints any pixels to the screen as you'll get something that will affect that paint job. requestAnimationFrame takes a callback function as an argument and it's in here where we call our render function. So we're telling the browser to render our scene before it paints any pixels to the screen. This will only do this once. So we will create a loop by calling draw again once the render method has been called. This means that we'll be rendering our scene every single time the browser calls its own internal paint method to update what's on the screen. Okay, two things before we continue. First, we've got to call this draw function once to kick the loop off. And secondly, render needs to know about our scene and camera, so we need to pass that in too. Down at the very bottom of our script, call draw and pass it scene and camera. We'll also have to update draw to accept these two arguments. Then because this function is calling itself, we have to pass the two values again. Okay, let's save here and check what's happening in the browser. Okay, great. If you've been following along correctly, you should just see your cube as before and no errors in the JavaScript console. So while nothing visually has changed here, our code is doing something very different. Instead of rendering our cube once and forgetting about it, it's drawing it over and over again in exactly the same place. Let's move it. Remember to delete the manual rotations we added down here. To animate our cube, all we have to do is inside the draw function, take the cube's y rotation value and add a bit onto it each time the loop is called. So cube.rotation.y = cube.rotation.Y + 0.01. Because this loop is called over and over again very quickly, we only want to add a tiny amount. Again, the draw function needs to know about the cube object. And remember to update the draw call within the loop too. Let's have a look. Whee, look at it go. If you want to speed it up or slow it down, simply change the amount you add to the rotation each time. Before the next lesson, take some time out to play with the different rotation values and see the effect it has. Try rotating on a different axis, or even all three at one time. I'll leave you to play.