Transform objects position

[00:00] We already got a glimpse of how to transform objects in the previous lesson when we needed to modify the camera position Put it far from the origin to be able to see our cube. So in this lesson, we're gonna learn the different Transformations that we can apply to a 3D object. We're going to see how to change the position, how to change the scale, and finally how to change the rotation in the different axes. So we're going to start by modifying our cube and we are going to modify its position in the X axis. So since we have our camera looking from this point or this coordinate, meaning that we're seeing from one side like this, the X axis is gonna be actually this one.

[00:50] So we're gonna do something like this and we're gonna put it in distance 2. But it can get really tricky to get the reference of where the origin is and how much have we moved our object in the 3D scene. So to help us with that, we're gonna add another object at the beginning of our scene that is called the access helper. So we're gonna do access helper new access helper class Okay, I think I already imported it. And we need to add it to the scene.

[01:30] So access helper. And this is gonna create this handy visual representation of where the axes are So the red one is the x-axis and this line right here is where the positive values Start so everything that is two Positive is gonna be here. This is the green one is the Y axis and the blue one is the Zeta axis. So let's see how it works. Let's now change for example the y-axis instead and you can see that it remains here in the center but it goes up to on the y-axis.

[02:12] Similar we can do zeta and we can move it on the zeta axis like this. We can even go further and do like this. So if we use negative numbers here what is going to happen is that it's going to be in the other side of the line. So this line goes to infinite to minus infinite to infinite same for the X and the Y. Modifying individual axis of the position can get really verbose because for example let's put this back to zero and then let's move it, I don't know half a unit in the X axis and then say position Y, move it in one in the Y axis and then cube position Z, move it too far from the region.

[03:03] So we can do exactly the same by just setting similar to what we did with the camera, just use the position set, because cube position is a vector tree And it has a property of set where we can pass the X the Y and Z in that case. We're gonna do one Like half one and two and it should remain in the same position For the sake of demonstrating that is working. Just I'm gonna replace the Y so it's below the plane, right? So if we console log to understand what is happening in the cube position and We open our developer tools here. We're gonna see that it's an instance of vector3.

[03:48] Vector3 is just, yeah, you thought you're never going to see vectors again from school. I have bad news for you. You're going to use them a lot. But it's actually pretty simple to understand. So a vector is basically a coordinate from the center of the scene where you can display an arrow, let's say.

[04:11] So the arrow point is gonna be on the number here. Actually it's probably easy if I draw it. To help visualize better what a vector tree looks like in the 3D scene, I created the draw with the same axis helper as we have in our scene, same color for the axis. So let's say we want to create a vector that is in the 1, 0, 2 And to help us Localize where it should be. Let's use some perpendicular lines in the y-axis.

[04:49] So we are going to go to the 1 here and draw an infinite line. Then let's go to 0 on the y-axis so it doesn't have height and then two here on the zeta axis. And then this point right here is essentially these coordinates and the vector is just an arrow that we can draw from the center of the scene into the coordinate that we have. This is a vector tree. We could also create another vector and let's say that this one is on the same one, then two, or let's say three, and then two.

[05:42] So that will mean that in this axis right here, we can create another line. So let's just leave it less, and let's load a line from here up okay and then we can I believe we can copy and paste and then move up a little bit around here and this line we can do the same, put it around here So the new vector is going to be at this point right here? So we can draw it in a similar fashion as we did before, from the center of the scene, like this, into the point. Well, I have drawn better arrows, but you get the idea. So these are representations of vectors in the 3D space.

[06:39] Let's try to use the knowledge that we just acquired on the vector drawing and try to position it or cube in a new position. So I'm gonna remove this and I'm gonna create a vector with the new position And we're gonna use new vector 3 We need to import it from 3 Okay And we're gonna use the same coordinates that we have in the drawing, which were, I think, one, three, and two in the z-axis, right? We could be tempted to try to do cube position and then equal to new position, but we're gonna get an error. And the error is because as Many properties on the 3d objects you cannot async position because it's a read-only property so we can still do it, but we need to use the set and then we are going to use new position X, new position Y and new position Zeta. And Now we have the cube and the position that we were before if this is to propose we can also say New position To array so this is gonna give us an array, so it's going to be like 1, 3, 2 like this and since it's an array we can use the spread operator to set the parameters here.

[08:19] And voila, we have the same result Also we can console log another things from the From the vector. For example, we could get the length of the vector. I believe it is like this. Okay, so this is the length of the vector with these coordinates. If I change any of the coordinates here and we put coordinates far from the origin, you're gonna see that this value increase because this is the distance from the origin.