Convert Unity transforms to THREE.js rotations

Question

How can I match the rotation of a THREE.js camera or object to a transform from a Unity GameObject?

Unity uses a left-handed system with a ZXY euler order. THREE.js uses

Answer 1

The key is to match the initial loading positions of the model between unity and threejs. The accepted answer probably will only work for 1 of those matches; but not all.

Below are 2 examples:

Sample 1: Unity initial loading position is x-left, y-up, and z-forward

To convert to three.js:

Position: flip the x because that's the only axis that's different.

Rotation: If you have a quaternion, convert it to Euler, then flip the y and z components of the rotation, then set the order to "ZXY". The reason we have to flip y and z is because in this sample, unity and threejs y and z axes are in the same directions, so they rotate in the opposite directions; flipping ensures they rotate in the same directions. The order is set to "ZXY" because that is the order unity is rotating.

Sample 2: Unity initial loading position is x-right, y-up, and z-backward

To convert to three.js:

Position: flip the z because that's the only axis that's different.

Rotation: Quaternion -> Euler, flip x, and y, set order to "ZXY". Same reasoning as above.

As you can see from the two examples, the starting positions of the model in unity and three.js affects how we convert the positions and rotations between them.

Answer 2

If you convert both rotations to Quaternions, I think the difference is a -1 scale on the X axis.

Answer 3

We ended up fixing this as follows:

Assuming you get qx, qy, qz and qw from Unity's quaternion, we apply the conversion below in JavaScript / Three.JS:

// convert Quaternion from Left-handed coordinate system to Right-handed

var q = new THREE.Quaternion( -qx, qy, qz, -qw );

var v = new THREE.Euler();  
v.setFromQuaternion( q );

v.y += Math.PI; // Y is 180 degrees off

v.z *= -1; // flip Z

object.rotation.copy( v );

That worked correctly in all axis rotations and directions.

three.js r.59