7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 8Length: 45 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Orbit With Animation

The orbit controls are great, but in this lesson we’re going to take things one step further as we add some default animation to the scene.

Useful Links

2.5 Orbit With Animation

Hello, and welcome back. We've got our basic orbit controls on our scene, which is nice, but when we're not clicking and dragging around, our scenes just kind of sitting there, and it's kinda boring to look at if nothing's happening. So in this lesson, what I wanna do, is I wanna add a little bit of animation to our screen, or to our scene, in addition to using our orbit controls. And in this particular lesson isn't really gonna contain anything new. It's just another step towards making our scene a little more interesting here. So I never did get rid of this NM speed variable, and I am gonna leave it here, I'm gonna bring the value down a little bit, though. So what I'm gonna do, is I'm gonna rotate this scene, and actually, before I do that, we need to make a new copy of this, so you can find the URL for a starting pen here in your course notes, let's just open that up and click on fork to create a new copy of it. And we'll start with this new copy. Okay, so let's scroll down to our function. And here's our animSpeed variable. Again, I'm gonna leave that there, but I'm gonna bring that down to a value of 0.001, because I do want this to rotate, but I want it to rotate pretty slowly. So after our controls.update, I'm gonna add another line here to rotate our scene. So we're gonna point to the scene itself, which is stored in a variable called scene.rotation.y. So we're going to alter the y rotation. And again, this is nothing we haven't seen before. We're gonna do +=, and then, where I'm gonna point to the animSpeed variable here. And there we go. So let's see how that looks. Let's save our file, and click on Run. And by default, once this loads, we'll see that we have some basic animation going on. And the cool thing about this, is we can still use our orbit controls. So I can click and drag to move our camera around. And any time we stop, I'm looking down on it from above now, we can see that our scene is still rotating, so it's kind of a cool effect there. And there we go. So let's say we wanted to make this a little more interesting, and instead of just rotating the scene, let's say we wanted to rotate the large center object, our large center shape here. Well, if you remember, if we scroll back up a little bit, our center shape has a variable name of centerShape. So that's the one we're going to point to. We're pointing to the Mesh itself. And, so we're gonna use that centerShape variable, and rotate it. So let's go back to our animate function, and after our scene rotation, let's point to our centerShape and change its rotation. So let's say, .rotation.x, and here, we'll say, += or .02, you can play around with these numbers until you come up with something you like, but you'll notice that this number is considerable higher than the animSpeed. So this object is going to be spinning a lot faster than the scene itself. And I think that'll give it a cool look, so let's point to centerShape, again, .rotation. This time, let's do the y rotation. And I'm gonna say -=, just for the sake of being different here. And I'm gonna do .05 for our y rotation. So once again let's save, and click on Run, and there we go. So now, we have a much more interesting animation. We have a scene that's slowly rotating around. And then, the large shape in the middle of the scene, is just rotating around on its own. And we can still use the orbit controls to move around in the scene, and there we go, very cool. So those are just some more ideas that you can play around with. Again, if you've got a bunch of shapes on the stage like this, it's kinda boring just to leave them sitting there. So even applying just a little bit of animation there, even when the user's not interacting with it, I think it adds a lot to the scene. So thank you for watching, and I'll see you in the next lesson.

Back to the top