Object.rotation's axis of rotation

[sushant24]

Does changing the value of an object's rotation property rotate the object about the world axes or the object's axes? For eg

object.rotation.x += 2

Will this rotate the object about the world X axis or the object's X axis?
I tried the following example :

var materials = []; 
materials.push( [ new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ] );
materials.push( [ new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ] );
materials.push( [ new THREE.MeshBasicMaterial( { color: 0x00ff00 } ) ] );
materials.push( [ new THREE.MeshBasicMaterial( { color: 0x00ff00 } ) ] );
materials.push( [ new THREE.MeshBasicMaterial( { color: 0x0000ff } ) ] );
materials.push( [ new THREE.MeshBasicMaterial( { color: 0x0000ff } ) ] );

object = new THREE.Mesh( new THREE.CubeGeometry( 20, 20, 20, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );

object.position.x = 0;
object.position.y = 0;
object.position.z = 0;

object.rotation.x = 0;
object.rotation.y = 0;
object.rotation.z = 0;

object.scale.x = 1;
object.scale.y = 1;
object.scale.z = 1;

scene.add( object );

After i have added the object to the scene i tried the following - 
object.rotation.x += Math.PI/4;
object.rotation.y += Math.PI/4;
object.rotation.z += Math.PI/4;

Until now the object rotates with respect to its own X,Y and Z axes.
but doing:

object.rotation.x += Math.Pi/4;

now rotates the object 45 degrees about the World X axis instead of the object's X axis.

[chandlerprall]

Exact same question came up in IRC yesterday, are you cxcx?

For anyone who needs this information in the future, object.rotation rotates against the world's axis. To rotate along an object's axis do this:

var rotation_matrix = new THREE.Matrix4().setRotationX(.01); // Animated rotation will be in .01 radians along object's X axis

mesh = new THREE.Mesh(new THREE.CubeGeometry(4, 4, 4), new THREE.MeshNormalMaterial);
mesh.add(new THREE.Axes());
scene.add(mesh);
mesh.rotation.set(Math.PI/2, Math.PI/4, Math.PI/4); // Set initial rotation
mesh.matrix.setRotationFromEuler(mesh.rotation); // Apply rotation to the object's matrix

var render = function render() {
    // Update the object's rotation & apply it
    mesh.matrix.multiplySelf(rotation_matrix);
    mesh.rotation.setRotationFromMatrix(mesh.matrix);

    // Render scene
    renderer.render(scene, camera);
};

Live example is at http://jsfiddle.net/uWbLf/4/

[sushant24]

Yes, It works great. Thank You :)

[smaciejew]

Maybe I am doing something wrong but for me it's not obvious - both examples, chandlerprall's and sushant24's are working with objects own axes. I did a number of tests and revealed that object is rotating against world axes when... object.rotation.z is not zero. In other case object rotates against its own axes. Here is an example (sorry for a bit dirty code):

var renderer,
scene,
camera,
mesh,
width = document.body.clientWidth,
height = document.body.clientHeight,
click = 0;
init();
animate(new Date().getTime());

function init() {

    renderer = new THREE.CanvasRenderer({antialias: true});
    renderer.setSize(document.body.clientWidth, document.body.clientHeight);
    renderer.setClearColorHex(0xEEEEEE, 1.0);
    renderer.clear();

    camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
    camera.position.z = 300;

    scene = new THREE.Scene();
    scene.add(camera);
    cube = new THREE.Mesh(new THREE.CubeGeometry(50,50,50), new THREE.MeshNormalMaterial());
    cube.add(new THREE.Axes());
    scene.add(cube);
    //cube.rotation.x += Math.PI/4;
    //cube.rotation.y += Math.PI/4;
    //cube.rotation.z += Math.PI/4;

    document.body.appendChild(renderer.domElement);

}

function animate(t) {
    requestAnimationFrame(animate);
    if(cube.rotation.x >= Math.PI/4) {
        cube.rotation.y += 0.01;
    }
    else {
        cube.rotation.x += 0.01;
    }

    renderer.render(scene, camera);
}

Can you tell me then how to really rotate object against world's axes please? Some example similar chandlerprall's?

[chandlerprall]

@Tinerot I'm not at a computer to test this but with the code I posted try using mesh.worldMatrix instead of mesh.matrix in all three instances.

[smaciejew]

@chandlerprall Thanks for support, by now it's not working with mesh.matrixWorld and mesh.matrixRotationWorld either. I will work with this later, but will be very grateful for any support.

[smaciejew]

I found a solution based on @chandlerprall 's code:

var rotation_matrix;

mesh = new THREE.Mesh(new THREE.CubeGeometry(4, 4, 4), new THREE.MeshNormalMaterial);
mesh.add(new THREE.Axes());
scene.add(mesh);
mesh.rotation.set(Math.PI/2, Math.PI/4, Math.PI/4); // Set initial rotation
mesh.matrix.setRotationFromEuler(mesh.rotation); // Apply rotation to the object's matrix

var render = function render() {
    rotation_matrix = new THREE.Matrix4().setRotationX(.01); // Animated rotation will be in .01 radians along object's X axis
    // Update the object's rotation & apply it
    rotation_matrix.multiplySelf(mesh.matrix);
    mesh.rotation.setRotationFromMatrix(rotation_matrix);

    // Render scene
    renderer.render(scene, camera);
};

The key is to rotate new rotation_matrix by new rotation step, then use rotation_matrix.multiplySelf(mesh.matrix) and set mesh.rotation.setRotationFromMatrix(rotation_matrix). This rotates mesh against the world's axis.

[stemkoski]

Minor updates for @chandlerprall 's solution for version 49 (maybe it will save someone else a few minutes of peeking through the source)

THREE.Matrix4().setRotationX(.01);

change to:

THREE.Matrix4().makeRotationX(.01);

and

mesh.rotation.setRotationFromMatrix(mesh.matrix);

change to

mesh.rotation.getRotationFromMatrix(mesh.matrix);