Using quaternions for rotation causes my object to scale at specific angle

Question

I am trying to build a rotation controller for my threejs objects. My rotation method is the following:

function rotate(axis, angle) {
    rotMat = new THREE.Matrix4().makeRotationAxis(axis, angle);
    rotMat.multiply(mesh.matrix);
    rotQuat = new THREE.Quaternion().setFromRotationMatrix(rotMat);
    mesh.quaternion.copy(rotQuat);
    mesh.updateMatrix();
}

I need to do it this way in order to have a rotation around the world axes and not the local axes (related to this post -> I also cannot use the Euler rotation member here because of a problem i describe here)

Getting to my problem:

I made this JSFiddle which shows the issue pretty good.

How to recreate:

1) Open the fiddle link.

2) Press X, Y or Z on your keyboard to enter the rotation mode for the desired axis.

3) Hold 'Arrow Up' key and rotate as long as the 'strange' scaling occurs. Should happen at an angle of 90-100 degrees. Note that the scaling continues if you keep rotating

Also note that i decrease the rotation step size (rotation speed) when getting to the specific angle area. The scaling only occurs when the rotation step size is quite small.

My question is:

Does somebody know why a rotation is causing a scale?

score 2 · Accepted Answer · answered Jun 21 '19 at 05:34

The reason why this is happening is because you need to feed a 'pure' rotation matrix to the Quaternion.setFromRotationMatrix method. So changing the rotate function to the following will work:

function rotate (axis, angle) {
  rotMat = new THREE.Matrix4().makeRotationAxis(axis, angle);
  rotMat.multiply(mesh.matrix);
  var rotMat2 = new THREE.Matrix4().extractRotation(rotMat);
  rotQuat = new THREE.Quaternion().setFromRotationMatrix(rotMat2);
  mesh.quaternion.copy(rotQuat);
  mesh.updateMatrix();
}

Using quaternions for rotation causes my object to scale at specific angle

1 Answers1