A visual intuition for Euler angles (Rotation vs Orientation)

I remember answering a question a long time ago with a series of posts explaining Euler angles and the difference between Rotation and Orientation. Lots of people have since told me these posts helped them out, so I’ve decided to compile them into a standalone tutorial. Hopefully this helps you build a visual intuition for Euler angles!


The Orientation and Rotation properties use a system known as Euler angles to define the rotation of any part in 3D space. There are three components, known in Roblox as X, Y and Z, which correspond to the angles of pitch, yaw and roll respectively.

The order in which you perform each one of those three rotations is important; applying them in a different order will produce a different result. This is what is meant when the docs say that Rotation is applied in XYZ order and Orientation applied in YXZ order.

You can think of it in terms of constructing the part’s CFrame. Rotation would look like this;

part.CFrame = CFrame.new(position) 
        * CFrame.Angles(pitch, 0  , 0   ) --X
        * CFrame.Angles(0    , yaw, 0   ) --Y
        * CFrame.Angles(0    , 0  , roll) --Z

Whereas Orientation would look like this;

part.CFrame = CFrame.new(position) 
        * CFrame.Angles(0    , yaw, 0   ) --Y
        * CFrame.Angles(pitch, 0  , 0   ) --X
        * CFrame.Angles(0    , 0  , roll) --Z

Notice how the order the angles are applied changes the final CFrame, as CFrame multiplication is non-associative (or in regular terms, cframe1 * cframe2 is not the same as cframe2 * cframe1).

So, why is this? Why would changing the order of the individual rotations change the final rotation?


Let’s take a regular part with no initial rotation. Here, I’m highlighting the axes of rotation (red = X, green = Y, blue = Z);

In the Euler angles system that Roblox uses, the axes of rotation will rotate along with the part. So, if we apply a 45 degree rotation on the X axis, notice that the Y and Z axes are also rotated:

If we then apply a 90 degree rotation on the Y axis, the axes will be rotated again;

Now, let’s try that again, but we’ll do the Y axis first. So here’s our starting part again:

We rotate 90 degrees around the Y axis:

Then, 45 degrees around the X axis:

If we compare the two side by side, you’ll notice that, due to the axes of rotation being rotated, the two final rotations are not the same:

This is why there is a difference between Rotation (X axis first, Y axis second, Z axis last) and Orientation (Y axis first, X axis second, Z axis last).

With that being said, you can still sometimes get rotations that end up appearing to be the same if you use certain angles; for example, let’s rotate 180 degrees on the X and Y axes. On the left I’ve done the X rotation first, and on the right the Y rotation first:

I wouldn’t rely on this behaviour, however, as it’s merely a coincidence if/when it happens. It’s always better to think about the order of your rotations when choosing whether to use Rotation or Orientation.

40 Likes

Wow, that may rlly be usefull, bookmarked!

1 Like

This is a great tutorial and made me understand instantly. I only have one question though:

Would using euler angles make a significant difference in your code, what do you really need to use euler angles for that you can’t use normal rotations for?

1 Like

Normal rotations are Euler angles! Simplistically speaking, when you’re dealing with an X rotation, Y rotation or Z rotation, no matter how they’re ordered, they’re almost certainly Euler angles.

These are all using Euler angles:

-- Euler angles, applied in XYZ order
part.Rotation = Vector3.new(1, 2, 3)
part.CFrame = CFrame.Angles(1, 2, 3)

 -- Euler angles, applied in YXZ order
part.Orientation = Vector3.new(2, 1, 3)
part.CFrame = CFrame.fromOrientation(2, 1, 3)
1 Like