Use the rotation property to rotate objects around the X, Y, and Z axes. Learn why Three.js uses radians instead of degrees, how to convert between them using Math.PI, and how rotation direction is determined by sign.

Modern Three.js Course
Go from zero to a modular Three.js app with Vite and TypeScript.
Transcript
[00:00] So next in line is rotation, but rotation is quite special, so please bear with me. I'm going to try to explain it better with a drawing. So you guessed it right, rotation is also a vector, but this vector represents something different. So we have a vector in the X, Y, and V. And this value represents the angle that we're going to rotate our object around on a specific axis.
[00:33] So if I put a value here it means that it's gonna rotate our object around this axis. If I put a value in the y-axis it means that it's gonna do something like this and it's gonna rotate like a carousel. Depending on the sign, the plus sign represents a rotation counterclockwise. While if we go clockwise, negative numbers are the way to go so here I believe that this is negative and this is positive because if we see it from here counterclockwise will be this one and this will be clockwise and if we see him from here then We have control clockwise, which will be this And I believe this is gonna be the negative Okay So depending on the value that we put here, we're gonna rotate either from this axis, this axis, or this axis. It's easy to believe that since we're talking about angles of rotation, we could use degrees directly as the values here.
[01:46] But that's not the case because these values here are not represented in degrees, they're represented in radians. So radians is another way of defining angles based on the number pi. Pi is equal to 3.1416 something, okay? But the rule of thumb is that pi is equal to 180. So p radians is equal to 180 degrees.
[02:27] So we can easily do the math and say that our angle, so here, is going to be the degrees. So let's say we want to use 30 degrees and multiply it by pi divided by 180. So this goes away and at the end if we want to achieve 30 degrees we need to use pi divided by 6 And these are the values that we're going to use here. So let's see how it looks in the code. To rotate our cube we're gonna do cube rotation y and we're gonna use the Pi number as we see with ratings.
[03:19] So to access the Pi number, we're gonna use the mat library.pi. And since we want to rotate it in 30 degrees counterclockwise, we're gonna do mat.pi divided by six. So you can see the cube rotated counterclockwise in 30 degrees. Now we can do the same as cube rotation x. And in this case we're gonna use matpy, but we're gonna divide it by 4 which is the same as 45 degrees Voila, we have our cube.
[03:56] So they're additive Similar to what we did with the position we can use the set method here and it's gonna set the same value so we could say math minus math pi divided by 6 to rotate clockwise and let's put 0 on 0 and then in the x-axis is going to be rotated in that value