Jump to content

Quaternion to euler angles


Recommended Posts

Hello Babylon community,

I have troubles to understand how to switch from quaternion to euler angles and vice versa.

First problem:

When I apply a rotation to a cube on axe X which should be a 90 degrees (when the face facing us get on the top) I get a value above 130 degrees from my convertion (quaternion to euler).

Second problem: 

When I go over 140 degree on axe X, axes Y and Z are changed! However I'm just playing with X axe.

Am I missing something?

Here a playground: https://playground.babylonjs.com/#7QNRN2#1

Press the key 'a' to rotate on the axe X and watch the console to see the euler angles convert from radian to degrees.

Keys mapping:

  • keys 'a' and 'd' for rotation on X
  • keys 'w' and 's' for rotation on Y
  • keys 'q' and 'e' for rotation on Z
Link to comment
Share on other sites

Hey JohnK thank for your answer.

Yes I did read this article but I still don't understand why when you rotate above 90 degrees on axe X all axis are changed.

I did a mistake in code when converting radian to degrees which fix problem 1.

So for my second problem if I apply a rotation of 91 degrees like below :

mesh.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(
	(91 * Math.PI) / 180, // 91 degrees convert to rad
var euler = quaternion.toEulerAngles();

I get thi following results:

  • euler.x = 89 degrees, but should be 91
  • euler.y = 180 degrees, but should be 0
  • euler.z = 180 degrees, but should be 0

Here an updated version of my playground: https://playground.babylonjs.com/#7QNRN2#2

press key 'a' gonna rotate 91 degrees on axe X and show the results in the console


Link to comment
Share on other sites

Hi @Seba and welcome to the forum from me.

11 hours ago, Seba said:

I still don't understand why when you rotate above 90 degrees on axe X all axis are changed.

It is because converting from quaternion to Euler Angles is not done using a 1 to 1 mapping.

Take the simple equation y = x2 , this is not 1 to 1 since both 2 and -2 lead to the same result, the function Math.sqrt(4) has to be written to give a result and the convention calculate and return the positive square root is used.

It is the same with rotations.

Take this cube ( all rotations given in degrees)


and rotate using the Euler Angles (0, 0, 90) to give


Starting with the same cube


rotate using the Euler Angles (180, 180, 270)

first rotate 180 about the local Y axis


followed by a rotation of 180 about the local X axis to give


and finally a rotation of 270 about the local Z axis to give


So the Euler angles (0, 0, 90) and (180, 180, 270) give the same orientation to the box.

Reversing this says given the that this box rot1.jpg.d3060dd50e080fdf39566ecabbfeda10.jpg was rotated to this orientationrot2.jpg.6005ddd5f1878f2520fbcadc02147cf9.jpg what are the Euler angles that produce this orientation? As there are more than one answer any algorithm to find the Euler angles must use some convention to produce a result.

As you can see from this playground http://www.babylonjs-playground.com/#1ST43U#74

your Euler angles of (91, 0, 0) and (89, 180, 180) produce the same orientation and it just happens that the convention used by the toEulerAngles function produces the second result.

Hope all is now explained.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...