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.
- Initialize a red vector representing the x-axis of some local coordinate system.
- Initialize the magenta vector representing the x-axis of the world coordinate system.
Initially, the local X and world X coincide.
- Change the local coordinate system of the red vector by rotating it around its Y and Z’.
- 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.