Three.js rotation to babyloy rotationQuaternion

Questions
1

I have been using Three.js and I am converting my app to Babylon. In my Three.js app save the design parts with storing the rotation as degrees (X, Y, Z). In my Babylon I am saving the rotation as rotationQuaternion.

I figured this would be easy to convert the Three.js rotation to rotationQuaternion but I have not had any luck. I have tried some methods as suggested by grok but no luck. Just wondering if anyone has done this and if so could you share how convert it?

2

If you have your x, y, z angles, you should be able to use it in

myObject.rotationQuaternion = BABYLON.Quaternion.FromEulerAngles(x, y, z)

It WILL NOT work, because its Quaternion math. The trick is to try all permutations of x, y, and z until it looks right.

myObject.rotationQuaternion = BABYLON.Quaternion.FromEulerAngles(x, y, z)
// or
myObject.rotationQuaternion = BABYLON.Quaternion.FromEulerAngles(y, z, x)
// or
myObject.rotationQuaternion = BABYLON.Quaternion.FromEulerAngles(z, x, y)
// or
myObject.rotationQuaternion = BABYLON.Quaternion.FromEulerAngles(x, z, y)
// or
myObject.rotationQuaternion = BABYLON.Quaternion.FromEulerAngles(z, y, x)
// or
myObject.rotationQuaternion = BABYLON.Quaternion.FromEulerAngles(y, x, z)

If it does not work, try inverting x, y and / or z, at some point it WILL work.

myObject.rotationQuaternion = BABYLON.Quaternion.FromEulerAngles(-x, y, z)
// or
[...]
myObject.rotationQuaternion = BABYLON.Quaternion.FromEulerAngles(y, x, -z)
2 Likes
3

Three.js uses right-handed coordinate system (+X+Y+Z) while Babylon.js by default uses left-handed coordinate system (+X+Y-Z). I could think of 3 ways:

  1. Force Babylon.js to use right-handed coordinate system.
    scene.useRightHandedSystem = true

  2. Negate scale.z of each objects.
    scale.z *= -1

  3. Convert translations and rotations.
    position.z *= -1
    rotationQuat.x *= -1
    rotationQuat.y *= -1

5 Likes