threejs rotation by x and z works individually but fails together

Question

I need to rotate the diamonds (see attachement) around the x and z axis. When rotating individually (meaning I only set rotation.x or rotation.z) the rotation looks fine and it works. But when I set both the rotations (x AND z) the rotation looks like this:

diamond rotation fail

Do I miss something? Is somehow the object local coordinate system rotated and now rotation around 2 axes fail?

diamond.position = brilliantPositions[i][0];
diamond.rotation = brilliantPositions[i][1];
this.frames.arrangementMesh.add(diamond);

Thanks in advance for a hint Kind regards Roman and Patrick

See [this](http://stackoverflow.com/questions/14774633/how-to-rotate-an-object-and-reset-its-rotation-to-zero/14776900#14776900) answer for an explanation of Euler rotations in three.js r.58. — WestLangley, May 21 '13 at 18:15

score 9 · Accepted Answer · edited May 23 '17 at 12:30

9

The euler order indeed solved the problem for us. In our case we had to do the follwing

diamond.eulerOrder = 'ZYX';

in order to have the calculation take the right way. Many thanks!

Here's more information about euler order

PS: I couldn't accept the comment as answer WestLangley therefore I just upped it and reposted the solution here

edited May 23 '17 at 12:30

Community

1
1

answered May 23 '13 at 08:29

Doidel

1,743
1
14
22

And now I can accept my own answer in 8 hours oO this stuff is very weird... I'll be back in 8 hours then – Doidel May 23 '13 at 08:30
2

These days it was renamed though. I think rotation.order is the new property – Doidel Dec 13 '13 at 05:57

score 0 · Answer 2 · answered May 22 '13 at 10:24

0

I would suggest using lookAt() function and then applying rotation around one of the axis. That should be good enough for almost any kind of rotation in space.

answered May 22 '13 at 10:24

Dragan Okanovic

7,509
3
32
48

threejs rotation by x and z works individually but fails together

2 Answers2