Euler angles in Three JS not as expected for simple box Mesh

Question

I have a box in the global axis system XYZ, and I want to rotate to a new axes system X'Y'Z'

Vectors for the new axes are:

X' = (0,1,0)
Y' = (1,0,0)
Z' = (0,0,-1)

This means i know the rotation matrix:

0,1,0
1,0,0
0,0,-1

And I need to rotate the box mesh to the new position like this:

I tried to rotate the box by applying Euler angles, but the rotation doesnt work, it seems no rotation is applied when I do the following:

let box = new Three.BoxGeometry(w, h, thickness);
const material = new Three.MeshBasicMaterial({...});
const mesh_box = new Three.Mesh(box, material);
mesh_box.rotation.x = -Math.PI/2;
mesh_box.rotation.y = 0;
mesh_box.rotation.z = Math.PI;

I have calculated the Euler angles using asin and atan2 formulas in chapter 2.1 (page 4) of this document: https://www.geometrictools.com/Documentation/EulerAngles.pdf

And these angles seem to be correct, if I apply them where alfa = x, beta = y and gamma = z, then according to the definition of Euler angles on Wikipedia I should get the rotation I want:

I'm probably misunderstanding something, any ideas?

Edit:

some extra examples, where you can see what I expect versus what I get:

Edit2:

now I understand that the alfa/beta/gamma rotations are simply around the X/Y/Z axis (and order matters)

in my example above I now understand that for the given rotation angles the actual result is correct (what I expected was of course wrong)

but then my question becomes this: I have the vectors for the new axes, so I know the rotation matrix, I can calculate the 3 angles (and its corresponding order) using the pdf I linked above:

alfa = -1.57
beta = 0
gamma = 3.14

how do I now which angle is used for which axis X/Y/Z?

Make sure you understand stackoverflow.com/a/17518092/1461008. Also, three.js uses a right-hand coordinate system with y-axis "up". — WestLangley
Thx for the info, I have updated my question. I understand the rotation and how the order matters, but I still don't know how the calculated Euler angles match with the ThreeJS rotation.x/y/z? — TomTem

TomTem TomTem · Accepted Answer · 2021-06-25T16:30:33

(answer to my own question below, not very usefull, but just adding it to close the post)

my mistake was unrelated to three.js, during testing I was using hardcoded angle values from excel, and it turns out BOOGTAN2 (= ATAN2) in excel switches the x/y parameters in comparison to javascript :( which is why the rotations where not doing what I wanted, but at least issue is resolved for me

in Javascript:
Math.atan2(90, 15); // 1.4056476493802699
Math.atan2(15, 90); // 0.16514867741462683

in excel:
ATAN2(90, 15) = 0.16514867741462683
ATAN2(15, 90) = 1.4056476493802699

Euler angles in Three JS not as expected for simple box Mesh

1 Answers