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.

initial position

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:

enter image description here

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!

  • \$\begingroup\$ Here is a similar question on stack overflow: stackoverflow.com/questions/4099369/… \$\endgroup\$ Commented Nov 20, 2015 at 19:47
  • \$\begingroup\$ 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? \$\endgroup\$
    – deblocker
    Commented Nov 20, 2015 at 22:24
  • 1
    \$\begingroup\$ Yes, interpolating two quaternions will result in the object rotating through the simplest/most direct set of intermediate orientations. \$\endgroup\$
    – DMGregory
    Commented Nov 21, 2015 at 0:30


You must log in to answer this question.

Browse other questions tagged .