Animating 3D Scenes

[00:00:00]
>> Matias Gonzalez: What I want to do now is grab the 3D model that I just loaded using the useGLTF hook and add that to our scene. So let's delete this mesh and actually add our scene component. And as we can see, I already have the rotary place, so I can inspect and play around with it.

[00:00:28]
So let's actually create something a little bit more interesting with this. Let's try to animate the position of the rover and also let's change the light to add some interesting reveal to it. So how we can do that is we can just use GSAP to animate our objects.

[00:00:57]
So we can use GSAP. Let's remove the orbit controls. Let's check how this looks without the orbit controls first. Okay, let's move this a little bit up. Oh, one thing is that when I add a camera, I could technically have multiple cameras, so I want to tell Three.js that this is the default camera, so I'm going to make default, so I'm going to use this camera specifically.

[00:01:55]
So let's actually move my camera a little bit away. Here, better, okay. Now one maybe to edit a little bit the zoom of my camera, let's actually edit the FOV of it, so let's make it something like the field of view. Basically this is going to make our camera film less or more, so it's basically going to zoom in and out.

[00:02:34]
So with this I can make a better shot, and one thing to always consider when working in 3D is that the field of view is how much it films vertically. So as I can see as I resize, the vertical shot stays the same and it only changes the side part of it.

[00:02:56]
So I should always look at where my shot is vertically and feed that until I'm happy and then just maybe add some logic if I wanted to react to the width of the screen. So first I want to move this scene using GSAP. So in Three.js there are things called groups that will enable us to move whatever is inside of these groups, so whatever transformation, rotation movement, scaling, it's going to be applied to anything that's inside.

[00:03:39]
So I'm going to animate this group to create some sort of reveal effect of the 3D object. And for that I need to reference this object somehow, so let's actually use state to do that. So I'm going to go const groupRef, setGroupRef. What this thing is going to allow me is you can actually connect reference to states like this.

[00:04:26]
So when this group is instanced, it's going to actually execute a set state. And this is actually not going to be a reference, it's just going to be a state with the group. So if I do console log, I will actually see that this groupRef is going to be a 3D group that I have in here.

[00:04:51]
And a group has a lot of information, but basically want to focus on three things: position, scale, and rotation. So we can see that the scale has three axes, the rotation has also three axes, and the position which is here also has three axes.

[00:05:25]
So I can go ahead and say gsap.to. And what I want to animate is the group.position. To make things easier, let's type this, so it's going to be a THREE.Group. So I'm going to import Group from Three.js so I can type this correctly. And or null.

[00:06:06]
So if the group is not defined. So again, as we saw before with the scroll sequence, we can actually animate any object and a position is just an object. It has x, y, and z values, so position.x is a number, same for y and z. So we can animate this position object saying I want to animate the y axis and I want to make it from -1, so it's going to start shifted and then it's going to move into the shot.

[00:07:15]
And for some reason it's not, oh, let's add a dependency. And I need to import gsap actually. Okay, so when the model loads, it will animate it in. So I can animate the position. Maybe I can also animate the rotation, so as it goes in the shot, it also rotates to make something more interesting.

[00:07:42]
So let's actually animate the rotation here and I'm going to rotate on the x axis. So again, rotating on the x axis will be rotating like this. So I can say like 0.5 maybe and specify a duration of 1 and let's actually add an easing, so ease: Power2.out.

[00:08:16]
Let's do the same for the position animation. So it's going to have a more interesting reveal and maybe we can even do the same with the light. So let's create another group. And we could even maybe animate the intensity of the light, so let's set it as a dependency and animate this.

[00:09:12]
So gsap.from, let's target the light this time and we will directly target the intensity since it's a number, so intensity is going to be 0. So we're going to animate this light from an intensity of 0 to 10. And this should cause a reveal to happen.

[00:09:42]
And maybe what we could do is also move it so that it gets a more interesting effect, so I'm going to start this way over the right, so 10. And then animate the position of the light also, if not. So the x axis is going to be 4 maybe, so this light's going to start way into the right because I just moved it on the x axis.

[00:10:46]
And then I'm going to animate the position a little bit to the left. And maybe we can make this also duration of, yeah, 1.2 and some easing. So with this we could create some interesting reveal for 3D objects. Basically the thing to understand here is that we can grab any object from any library that we are using and just target that as a target for any GSAP animation.