2.5 Basic Animation

Before we wrap up this short introductory course, I want to at least touch on animating objects in three.js. Now, when we first rendered the scene using renderer.render, we just created this one line of code here. Now the suggested way to render a scene is to put it inside a loop that's gonna run over and over again, so that it will render your scene continuously at your current screen's refresh rate, which is usually 60 frames per second. So before we do that I'm going to make a new copy of our page. You can find the URL for our starting page here or our starting code pin in the course notes for this lesson. I'm gonna click on Fork and all of our changes will be saved in this new copy. So we have again our renderer.render, that's really hard to say for some reason and I want to put that inside a function that's going to animate and run over and over again. So the way we do that is we're gonna create a function, and I'm gonna call it animate. And inside that function what we're gonna do is we're going to call requestAnimationFrame in JavaScript. And then inside the parentheses here, we're gonna type in the name of the function that we want to run at the current refresh rate. And the function we wanna run is the function that we're inside right now, this animate function. So again, this animate function is gonna run over and over again at the current frame rate, and then we're gonna grab renderer.render. I'm gonna cut that and I'm gonna paste it inside this animate function immediately after our requestAnimationFrame method. Now as it is this animate function is never going to run because we have nothing calling this function so immediately after we create that function, we're gonna call it. We're gonna say animate(); to end statement, and we're back to where we're started. So now we can see our shape again. And the only difference is it's now redrawing our stage over and over again at the current frame rate. So now what we can do is we can add some more code inside this function to cause our shape to animate. And as you can imagine there are a lot of things that you can do with this animate function in order to animate the items on your screen. But we're just gonna look at a simple rotation for now. So in between our requestAnimationFrame and our render statement, we're going to alter the rotation. Let's do the x rotation of our cube. So we're gonna point to our cube, and we're gonna point to our rotation property of our cube. And let's do the x rotation, so .x and instead of just setting it equal to something we're going to increase it by a certain amount. So let's say += and we're going to use a pretty small number here, let's say .01; and now when we look at our scene we can see our cube animating. We can make it a little more interesting by rotating around a couple of axes at the same time, so let's copy that, and paste it. And then change this to .y instead of .x and then we will see it rotating around two different axes at the same time. And with the lighting set up with the way it is, it keeps it pretty interesting. So then we could do another one if we wanted to rotate it around the z axis as well. And then we'll have it moving around all three axes. And we can come in and change the speed here. If we bring it up to 0.1, it's gonna move a lot faster. In fact, that might cause some seizures there, so let's undo that and maybe just increase it by a little bit here. Maybe 0.04 in all three instances and we'll see it rotate a little bit faster. So that's just kind of an introduction of how to animate with three.js and it might be a little less distracting if we move our lights around because right now there's a lot of flashing off and on. So we could grab maybe our second direction light, the one that's down below and change its position a little bit. And so we'll do the z position. We'll bring it towards us a little bit, maybe by 10 pixels or so. That way it won't be going completely black when those sides are facing us and that looks a little bit better. You can play around with that a little bit more, maybe even move the x rotation. So we might as well just do a set. If we're going to change all three properties, we might as well do position.set and let's set the x position maybe to -10, our y position to -10 and our z position to 10. And there we go. So you can play around with the lighting a little bit to change how it looks, but you get the basic idea. Anything you put inside this animate function is going to run over and over again at the current refresh rate. So as you can imagine you can do a lot with that. You can do the same thing with your position and things like that. But again that's just a small taste of what you can do with animation in three.js. There's a lot more you can do, we've barely touched the surface. But hopefully we've at least given you a good starting point. So thank you for watching and we'll see you in the next video.