Why does my rotation go awry when I change the scale of a Three.js mesh?

Question

I wanted to rotate a sphere around the world x and y axes. I successfully accomplished that with this code:

// Update ball rotation.
var tempMat = new THREE.Matrix4();
tempMat.makeRotationAxis(new THREE.Vector3(0,1,0), stepX/ballRadius);
tempMat.multiplySelf(ballMesh.matrix);
ballMesh.matrix = tempMat;
tempMat = new THREE.Matrix4();
tempMat.makeRotationAxis(new THREE.Vector3(1,0,0), -stepY/ballRadius);
tempMat.multiplySelf(ballMesh.matrix);
ballMesh.matrix = tempMat;
ballMesh.rotation.getRotationFromMatrix(ballMesh.matrix);

When I scale the ballMesh in any way away from (1,1,1), however, the rotations go awry in a way that is difficult to describe. I've put up a jsfiddle example here:

http://jsfiddle.net/pxTTv/26/ (use the arrow keys to rotate)

If you change the scale (indicated in the jsfiddle code) back to (1,1,1), it works as I expect it to.

What is causing this, and how can I fix it?

Answer 1

You left the scale argument out of the call to vector.getRotationFromMatrix( matrix, scale ).

Also, it's best not to mess with the object matrix -- unless you really know what you are doing. Instead just set the object's rotation, position, and scale, and let the library update the matrix.

In your case you were overwriting the object's matrix, but by luck, it was being recomputed in the render call.

Here is a corrected fiddle: http://jsfiddle.net/pxTTv/27/