Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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???

like image 211
Tony Han Avatar asked Jun 16 '12 04:06

Tony Han


People also ask

How do you rotate an object in 3D space?

Rotate a layer in 3D spaceMove the pointer over one of the rotation handles (small circles surrounding the arrows) until a color rotation ring appears, then drag the ring. The red ring rotates the object around its X axis. The green ring rotates the object around its Y axis.

How do you rotate an object on an axis in blender?

To rotate objects, activate Rotate mode by pressing RKEY. As in Grab mode, you can change the rotation by moving the mouse, confirm with LMB, or ENTER cancel with RMB or ESC. Rotation in 3D space occurs around an axis, and there are various ways to define this axis.


1 Answers

Since release r59, three.js provides those three functions to rotate a object around object axis.

object.rotateX(angle); object.rotateY(angle); object.rotateZ(angle); 
like image 109
Hetong Avatar answered Sep 28 '22 09:09

Hetong