Rotation around an axis three.js

Question

I'm using three.js Revision 69 and i've got a problem rotating objects around global axis. I've found on many website the function rotateAroundWorldAxis defined as follow:

    function rotateAroundWorldAxis( object, axis, radians ) {

    var rotationMatrix = new THREE.Matrix4();
    rotationMatrix.makeRotationAxis( axis.normalize(), radians );
    rotationMatrix.multiply( object.matrix );                       // pre-multiply
    object.matrix = rotationMatrix;
    object.rotation.setFromRotationMatrix(object.matrix);
}

I've called rotateAroundWorldAxis in my render function like that:

function render() {

        var yAxis = new THREE.Vector3(0,1,0);
        rotateAroundWorldAxis(albero,yAxis,Math.PI / 180);
        requestAnimationFrame( render );    
        renderer.render( scene, camera );
    }

But the result is always the same, the object is rotating around his own axis, I've obtained the same result using another function found on the web: rotateAroundObjectAxis

  var rotObjectMatrix;
    function rotateAroundObjectAxis(object, axis, radians) {
        rotObjectMatrix = new THREE.Matrix4();
        rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);                
        object.matrix.multiply(rotObjectMatrix);
        object.rotation.setFromRotationMatrix(object.matrix);
    }

Could someone please help me finding out what is wrong with my code? Why those two function are achieving the same result even if they were made for different purposes?

The full javascript is:

function drawStuff() {


    var albero = new THREE.Object3D();
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );


    var cone = createCone(0, 0, 0); //create cone of the tree
    var cylinder = createCylinder(0, -1.1, 0); //create cylinder of the tree
    albero = createAlbero(-4, 2, 3);

    scene.add(albero);

    var axisHelper = new THREE.AxisHelper( 5 );
    scene.add( axisHelper );

    camera.position.z = 20;


    function createCone(x, y, z){       
        var coneGeometry = new THREE.CylinderGeometry(0.0, 0.7, 2, 32, 32);
        var coneMaterial = new THREE.MeshBasicMaterial( {color: 0xFF0000} );
        var cone = new THREE.Mesh( coneGeometry, coneMaterial );
        cone.position.set(x, y, z);
        return cone;
    }

  function createCylinder(x, y, z){

        var cylGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.4, 32, 32);
        var cylinderMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} );
        var cylinder = new THREE.Mesh( cylGeometry, cylinderMaterial );
        cylinder.position.set(x, y, z);
        return cylinder;

    }

  function createAlbero(x ,y, z){

        albero.add(cone);
        albero.add(cylinder);
        albero.position.set(x ,y, z);
        return albero;
    }

    var rotObjectMatrix;
    function rotateAroundObjectAxis(object, axis, radians) {
        rotObjectMatrix = new THREE.Matrix4();
        rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);

        //moltiplico la matrice dell'oggetto per la matrice di rotazione
        object.matrix.multiply(rotObjectMatrix);

        object.rotation.setFromRotationMatrix(object.matrix);
    }


    function rotateAroundWorldAxis( object, axis, radians ) {

        var rotationMatrix = new THREE.Matrix4();

        rotationMatrix.makeRotationAxis( axis.normalize(), radians );
        rotationMatrix.multiply( object.matrix );                       // pre-multiply
        object.matrix = rotationMatrix;
        object.rotation.setFromRotationMatrix(object.matrix);
    }



    function render() {

        var yAxis = new THREE.Vector3(30,50,1);
        rotateAroundWorldAxis(cone2,yAxis,Math.PI / 180);
        requestAnimationFrame( render );    
        renderer.render( scene, camera );
    }                                    
    render();


}

score 3 · Accepted Answer · answered Oct 31 '14 at 17:19

If I am correct in understanding your intent, you are interested in rotating your objects about a specified axis, which essentially would set them moving around in a circle.

This is actually more about the positioning of the objects as opposed to the orientation (read: rotation) of the object. Therefore, it might be better to write a function that would manually set the position of the object based on the rotation that you are interested in.

function rotateAboutWorldAxis(object, axis, angle) {
  var rotationMatrix = new THREE.Matrix4();
  rotationMatrix.makeRotationAxis( axis.normalize(), angle );
  var currentPos = new THREE.Vector4(object.position.x, object.position.y, object.position.z, 1);
  var newPos = currentPos.applyMatrix4(rotationMatrix);
  object.position.x = newPos.x;
  object.position.y = newPos.y;
  object.position.z = newPos.z;
}

Try that, and let me know if that works for you.

score 0 · Answer 2 · answered Nov 11 '14 at 09:55

I've found another way to rotate around world axis, using a function called "rotateEuler"

 function rotateEuler(object, eul) {

    object.position.applyEuler(eul);
}

Here is the call to the function:

var alberoRot= new THREE.Euler(0,0.02,0, "XYZ");
    rotateEuler(albero,earthRot);

Rotation around an axis three.js

2 Answers2

Linked