2.2 Orbiting the Scene

Hello and welcome back. In this lesson, I want to take the scene that we were looking at in the last lesson, and I want to change the way that we're animating it. Right now, all we're doing in our animate function is we're rotating our scene, and we're basically just increasing the y rotation by 0.01 every time the animate function refreshes. Well, in this lesson, I wanna make that a little bit more complicated. Instead of rotating the scene, maybe we need the scene to be static, maybe we need the scene to stay still. So we're gonna turn off that rotation initially. So actually before we do that, let me undo that. Before we get started, let's go ahead and click on the fork button there to create a new copy of our code. And you can find the URL for the starting CodePen here in the course notes for this lesson. And once you open up that URL, go ahead and click on fork, and we'll start with this new copy. So again, in this new copy, I'm gonna go down to the animate function here, and I'm gonna get rid of the rotation. And when we do that, we're gonna save it and refresh it, then well see that we now have a static scene, it's no longer animating. And what I'm gonna do now is I'm gonna create an animation by animating the camera around the scene instead of just spinning the scene in front of the camera. And we're gonna have to use a little bit of trigonometry to make this happen. So don't let that scare you. I remember very little about trigonometry from my high school and college days, so this is all a refresher for me as well. And you don't have to understand trigonometry to make this happen. This is a common technique, and a lot of people use it, and a lot of people just copy this code from elsewhere. So it's important to know that you don't have to understand trigonometry backwards and forwards to make this work. So inside our animate function, what we're gonna do is we're going to alter the position of our camera. And since we're gonna be moving around the scene, we don't need to worry about changing the y coordinate of our camera. We're not gonna be moving our camera up and down, we're gonna be moving it around. So really, we're just altering the x and the z coordinates. We're gonna it move left, and right, and forward, and back. And using trigonometry, hopefully, we're gonna be able to do that in a smooth circle. So what I'm gonna do is I'm gonna start by creating a variable called x. And in that variable, I'm going to store our current camera position. Now our camera is stored in a variable called camera, and the way we access that position is we type camera.position and then .x, cuz we want the x coordinate of our camera. So I'm going to do the same thing now with the z coordinate of our camera. So again, camera.position, and this time .z. And we're gonna use the current position of our camera or the current x and z positions of our camera in order to calculate where we need to go in the next frame. So what we're gonna do is, first of all, before we do that and before our animate function here, I'm gonna create another variable here called animSpeed, for animation speed. And I'm gonna set this equal to a value of 0.005. And you can experiment with that number a little bit. That will determine how quickly we're gonna be orbiting our camera around the scene. But that's the number that I've settled for, for this particular lesson. So the next two lines are gonna be kind of the meat of what we're doing here, and it's gonna be the most complicated thing. So for x coordinate, we're gonna be moving our camera left and right. Now, there are lots of ways to do this, but again, I'm gonna be using trigonometry to do this. More specifically, I'm gonna be using the math.cosine method and the math.sine method to make this happen. So again, we're dealing with the x position of our camera here. We're gonna set a new position forward, so we're gonna say camera.position.x =. And this is where it gets tricky. And if you're a math lover, then you might dig into this and figure out exactly how this works. But for the rest of us, we're just gonna copy this and watch the magic happen. So the way we're gonna do this is we're gonna points to our stored exposition first, x, we've stored it in this variable called x. And we're gonna multiply that by math.cos for cosine, and we're gonna pass into that cosine method our animation speed, which we stored in the animSpeed variable. Then, we're going to subtract the current z coordinate of our camera, which we stored in this variable called z times Math. And let me stretch this out a little bit so that we can see entire lines at once. So it's gonna be- z times Math.sine. And we're gonna get the sine of our animSpeed value as well. So again, if this doesn't make a whole lot of sense to you, don't worry about it. I'm not great with math, so this doesn't make a whole lot of sense to me either, I just know that it works. So I'm gonna take this entire line of code and copy it, and then I'm gonna paste it on the next line, and we're just gonna change a couple of things. So now we're dealing with the z coordinate, so we're gonna change camera.position.z. And we're gonna start off by multiplying our current z value, which we stored in that z variable, times math.cosine of the animation speed. And then this time, we're gonna have a plus instead of a minus. And we're gonna do x times math.sine of the animation speed. So it's very important that you get all of the xs and zs in the right place and that you get your pluses and minuses in the right place, or it's gonna do some really weird things when you animate it. So there's one more thing we need to do to this animation, but before we do it, let's take a look at what our scene is doing now. So I'm going to save that and click on Run. So when we run it, you will see that our camera does seem to be moving around our scene. But the problem is, it's always pointing forward, so we're not getting that effect that we're looking for. Eventually, we should see our scene comeback into view. But yeah, there it goes. But, obviously, that's not what we want. We want our camera to look at the center of our screen, excuse me, the whole time. And that's actually very, very easy to do. We can do that with one line of code. So right after these two lines of code, we're going to point to our camera, and then we have this wonderful method called lookAt, so that's look all lowercase and then At with a capital A, and then the coordinates that we wanna look at. And we can look at the position or our scene which is by default at a coordinate of 000. So if we just look at scene.position, that should get us where we want. So remember, all of this is happening over and over again at your screen's refresh rate. So over and over again, we're telling our camera to keep looking at the center of our scene. And that should give us the effect that we're going for. So let's save that, and let's click on Run one more time. And hopefully now, we'll get the effect that we're going for, and sure enough we do. So you'll notice right now we're rotating around our scene in a clockwise direction if you're looking down on top of the scene. If we want to change the direction of that rotation, we can do that simply by swapping these plus and minus signs. So let's make the top one a + and the bottom one a -, and then let's run it again. And now you'll notice it's running in the opposite direction. So it's as simple as just switching those two signs. I'm gonna switch those two back to where we had them before, save our scene, refresh it, and there we go. So that's how you can rotate a camera or orbit a camera around an object or a scene in Three.js. It's very easy to do, maybe not so easy to understand if we're not good with trigonometry. But again, it's just a couple of lines of code and we get the effect that we see here. So thank you for watching, and I'll see you in the next lesson.