Definition of Intrinsic Tait-Bryan Euler Angles does not reflect actual behavior

In the documentation, the description of Three’s rotation system is as follows:

Three.js uses intrinsic Tait-Bryan angles. This means that rotations are performed with respect to the local coordinate system. That is, for order ‘XYZ’, the rotation is first around the local-X axis (which is the same as the world-X axis), then around local-Y (which may now be different from the world Y-axis), then local-Z (which may be different from the world Z-axis).

Please open the jsfiddle to follow along.

  1. Initialize a red vector representing the x-axis of some local coordinate system.
  2. Initialize the magenta vector representing the x-axis of the world coordinate system.
    Initially, the local X and world X coincide.
  3. Change the local coordinate system of the red vector by rotating it around its Y and Z’.
  4. In the animation, rotate about the local X axis, which should point along the direction of the red vector.

Based on the description in the documentation, the red vector should just rotate about itself (since its visualizing its local x-axis) and the rotation shouldn’t be visible (except for maybe some aliasing artifacts).

But instead, it appears as though the red vector is rotating about the world x-axis (magenta vector).

I’m sure the Euler rotation function has been thoroughly vetted by now, so perhaps this isn’t a real bug. But it still appears as though there’s an inconsistency between the documentation and the behavior I see on screen.

That’s unfortunately wrong. You overlook that you first apply the rotation around the x axis, and then around y and z. By modulating the rotation around the x-axis in the animation loop, the frame of reference for the subsequent y and z rotation changes. It’s exactly what the documentation tries to explain.

Thanks for the reply. I’ve made a new fiddle to visualize all three axes.

It’s clear that the Y and Z axes are in a different coordinate frame when we rotate about X. But why is the local X axis not along the red vector?

How would I visualize the current local X axis?

Sorry, I don’t know how to explain it in a different way. Maybe reading 3D Math Primer for Graphics and Game Development might help to clarity your understanding.

BTW: You can use THREE.AxesHelper to easily visualize the local coordinate system of the axes group object.

https://jsfiddle.net/ubp03y2f/1/

Thanks Mugen, I think I was just tired when I ran into this issue. It’s all clear now and should have been obvious since the beginning :slight_smile: