0
\$\begingroup\$

my function:

    function rotateAroundWorldAxis2(object, radians1, radians2) {


        object.rotWorldMatrix.makeRotationX(radians1).makeRotationZ(radians2);
       // object.rotWorldMatrix;

        // old code for Three.JS pre r54:
        //  rotWorldMatrix.multiply(object.matrix);
        // new code for Three.JS r55+:
        object.rotWorldMatrix.multiply(object.matrix);                // pre-multiply

        object.matrix.copy( object.rotWorldMatrix );

        // old code for Three.js pre r49:
        // object.rotation.getRotationFromMatrix(object.matrix, object.scale);
        // old code for Three.js pre r59:
        // object.rotation.setEulerFromRotationMatrix(object.matrix);
        // code for r59+:
        object.rotation.setFromRotationMatrix(object.matrix);

    }

my object was initialized like this: object.rotWorldMatrix = new THREE.Matrix4();

\$\endgroup\$
1
\$\begingroup\$

Calling "makeRotationX/Y/Z" will fill up the matrix cells with values for rotation around the wanted axis, thus overriding any previous value in the matrix.

According to example here, you should instead build one separate matrix per rotation axis then at the end multiply those matrices in a single final one.

So in your case it would look like :

var mX = new THREE.Matrix4();
mX.makeRotationX(radians1);

var mZ = new THREE.Matrix4();
mZ.makeRotationZ(radians2);

var m = new THREE.Matrix4();
m.multiplyMatrices( mX, mZ );

object.rotWorldMatrix.copy(m);

object.rotWorldMatrix.multiply(object.matrix); 

//...

Note that depending on the order you use to multiply matrices you may get different result, this is called the "gimbal lock" problem but this is another vast subject, I will not discuss it here...

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.