# Tweening back from arbitrary 3D rotation in javascript

I'm using a 3D javascript library to rotate the vertex of a 3D object with a classic 3x3 matrix, to an arbitrary angle in the 3D space, as depicted in the image below. For example, a first rotation of 180° about the X axis, and a 2nd rotation of 180° about the Z axis will produce the following result: Now, i need to tween back the 3D object to the initial rotation, e.g. to 0,0,0 degrees.

Briefly, the 3D figure shall be return to its initial position. In this example, the shortest way would be to apply to the figure a 180° rotation about the Y axis.

How can i determine the shortest way, starting from an arbitrary rotation, and then calculate a certain number of intermediate rotation angles to smoothly animate the movement of the 3D figure?

Is this a problem of decomposing a rotation matrix back to Euler angles, or could be this accomplished with pure matrix math? Should i keep track of the applied rotation angles? I have really no idea from where to start.

Any hint, preudocode or javascript algorythm that can me point to the right direction would be greatly appreciated!

• Here is a similar question on stack overflow: stackoverflow.com/questions/4099369/… – PatrickSharbaugh Nov 20 '15 at 19:47
• I'm looking this interesting answer from Ewerton: Interpolating between rotation matrices i'm wonder if switching to quaternion would solve the problem of the shortest path... any clue? – deblocker Nov 20 '15 at 22:24
• Yes, interpolating two quaternions will result in the object rotating through the simplest/most direct set of intermediate orientations. – DMGregory Nov 21 '15 at 0:30