ThreeJS rotation by X and Z axes doing the same rotation but in different direction

Question

As far as I understood all rotations set via object.rotation.x / object.rotation.y / object.rotation.z are applied in respect to object's axes regardless of objects position in scene.

But in the code below after I set simple rotation value box.rotation.y = PI/2 all subsequent changes to box.rotation.x seems to be rotating it not on Box X Axis but on Box Z Axis axis

If I will change box.rotation.z it will still rotate on Box Z Axis just in other direction.

So basically the problem is - rotation by Box X Axis and Box Z Axis doing the same rotation but in different direction.

What am I doing wrong here? How do I use rotation properly here e.g. if I want to apply rotation on Box Z Axis after rotation on Box Y Axis.

here I've created sandbox to reproduce the issue https://stackblitz.com/edit/trhee-js-plane-rotation?file=index.js

Answer 1

You're running into gimbal lock, so you'll need to use Quaternions to achieve the rotations you want. First you need to set each quat from axis angle, then you'll have to multiply them together to get the desired rotation.

const xAxis = new THREE.Vector3(1, 0, 0);
const xRot = -Math.PI;
const xQuaternion = new THREE.Quaternion();
xQuaternion.setFromAxisAngle( xAxis, xRot );

const yAxis = new THREE.Vector3(0, 1, 0);
const yRot = Math.PI / 2;
const yQuaternion = new THREE.Quaternion();
yQuaternion.setFromAxisAngle( yAxis, yRot );

box.quaternion.multiplyQuaternions(xQuaternion, yQuaternion);

You could add a z-quaternion too using the same method as above, just make sure all 3 quats get multiplied at the end.