Question

174

How to rotate a 3D object on axis three.js?

rated 0 times [ 179] [ 5] / answers: 1 / hits: 133504 / 12 Years ago, sat, june 16, 2012, 12:00:00

I have a great problem about the rotation in three.js
I want to rotate my 3D cube in one of my game.

//init

geometry = new THREE.CubeGeometry grid, grid, grid

material = new THREE.MeshLambertMaterial {color:0xFFFFFF * Math.random(), shading:THREE.FlatShading, overdraw:true, transparent: true, opacity:0.8}

for i in [[email protected]]

    othergeo = new THREE.Mesh new THREE.CubeGeometry(grid, grid, grid)

    othergeo.position.x = grid * @shape[i][0]

    othergeo.position.y = grid * @shape[i][1]

    THREE.GeometryUtils.merge geometry, othergeo

@mesh = new THREE.Mesh geometry, material



//rotate

@mesh.rotation.y += y * Math.PI / 180

@mesh.rotation.x += x * Math.PI / 180

@mesh.rotation.z += z * Math.PI / 180

and (x, y, z) may be (1, 0, 0)

then the cube can rotate, but the problem is the cube rotate on its own axis,so after it has rotated, it can't rotate as expected.

I find the page How to rotate a Three.js Vector3 around an axis?, but it just let a Vector3 point rotate around the world axis?

and I have tried to use matrixRotationWorld as

@mesh.matrixRotationWorld.x += x * Math.PI / 180

@mesh.matrixRotationWorld.y += y * Math.PI / 180

@mesh.matrixRotationWorld.z += z * Math.PI / 180

but it doesn't work, I don't whether I used it in a wrong way or there are other ways..

so, how to let the 3D cube rotate around the world's axis???

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katelynn

Add To Favorites

Follow

Total Points: 378

Total Questions: 86

Total Answers: 108

Location: Azerbaijan

Member since Fri, May 12, 2023

1 Year ago

answered 12 Years ago nestorjarettg · Accepted Answer

Here are the two functions I use. They are based on matrix rotations. and can rotate around arbitrary axes. To rotate using the world's axes you would want to use the second function rotateAroundWorldAxis().

// Rotate an object around an arbitrary axis in object space

var rotObjectMatrix;

function rotateAroundObjectAxis(object, axis, radians) {

    rotObjectMatrix = new THREE.Matrix4();

    rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);



    // old code for Three.JS pre r54:

    // object.matrix.multiplySelf(rotObjectMatrix);      // post-multiply

    // new code for Three.JS r55+:

    object.matrix.multiply(rotObjectMatrix);



    // old code for Three.js pre r49:

    // object.rotation.getRotationFromMatrix(object.matrix, object.scale);

    // old code for Three.js r50-r58:

    // object.rotation.setEulerFromRotationMatrix(object.matrix);

    // new code for Three.js r59+:

    object.rotation.setFromRotationMatrix(object.matrix);

}



var rotWorldMatrix;

// Rotate an object around an arbitrary axis in world space       

function rotateAroundWorldAxis(object, axis, radians) {

    rotWorldMatrix = new THREE.Matrix4();

    rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);



    // old code for Three.JS pre r54:

    //  rotWorldMatrix.multiply(object.matrix);

    // new code for Three.JS r55+:

    rotWorldMatrix.multiply(object.matrix);                // pre-multiply



    object.matrix = 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);

}

So you should call these functions within your anim function (requestAnimFrame callback), resulting in a rotation of 90 degrees on the x-axis:

var xAxis = new THREE.Vector3(1,0,0);

rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180);