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.