Position & Scene

[00:00:00]
>> So now we have position which is just like our earlier example of the coordinate system, but now we're able to change the position of this mesh, and you can try changing this. So mesh.position is a vector three. So you could say mesh.position.setScalar(0.5) and it's gonna set the xyz to the same, or for example you could say mesh.position and then set which is gonna allow you to change the x y and z values independently.

[00:00:30]
So yeah it's a vector 3 so it's just look into the docs there if you're confused or you need a refresher about that. And then rotation, so rotation is similar to vector 3 but it's called Euler, but for our purposes, we can think of it like a vector three has an x, y, z as well has a lot of the same functions like set, setscalar, etc.

[00:00:53]
And rotation allows us to rotate a mesh around these three axes, so rotation is something that's when you first encounter in 3D it can be kind of mind bending. And so the way I like to think about it is with my arms or with my fingers, and so generally speaking, when we're working in WebGL, the y axis goes up and down, and so you can put your arms up and down and that would be the y axis.

[00:01:18]
And so if we're rotating something around the y axis, we're literally rotating it around this axis as if you're like spinning around a pole or something like that in the fire station. And then the x axis would be this sort of formation, where you have your arms out to either side, and you're rotating an object around this axis here, and so that would be the actual form of rotation.

[00:01:47]
And so you could see how, when we rotate this cube, it's as if we're rotating around that that line. And then the Z axis would be front and back, and it's the same concept we're just rotating it around this way. And so you can either use your arms or another tip is to use your fingers where you point yourself a gun with your thumb up, your right hand, and your first finger out.

[00:02:10]
Just like a gun and then you stick your second finger, your middle finger up, sort of perpendicular to your index, your first finger and it creates the same structure. With the thumb going up and down for y, the middle finger going left and right for x, and your first finger here going forward backwards for z.

[00:02:28]
So that's just a bit of a way to remember these kind of things. You'll often see me when I'm working with 3D math, I'll just put out the gun and sort of visualise how I wanna rotate something, so it's pretty helpful. And then lastly we have scale, so this is another property of mesh, that allows us to scale objects in the X, Y, Z, this is a vector THREE, so we have all those same commands.

[00:02:51]
Okay, and the last thing that ties everything together is the scene, and so, the scene graph is a bit like the DOM tree, we can place objects into it and then we can place objects into those objects and so on and so forth. We can create this tree of different meshes that makes up a scene, a virtual 3D scene.

[00:03:10]
So you just create a scene which is an empty object, and then you go through and when you create a mesh after the mesh is created, you say scene.add and then the name of the mesh, and that will add it into the scene. Without this line, if we're gonna comment this line out, the mesh wouldn't appear.

[00:03:27]
So if you're working with 3D and you don't see a mesh, just make sure it's been added to the scene. Sometimes it might have been added to another object, but that object hasn't been added to the scene. So just make sure