如何在three.js轴上旋转3D对象？

我有一个很大的关于three.js的旋转问题，我想在我的游戏中旋转我的3D立方体。

//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 [[e-mail]] 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 

和（x，y，z）可以是（1,0,0）

那么立方体可以旋转，但是问题是立方体在它自己的轴上旋转，所以在它旋转之后，它不能按预期旋转。

我find页面如何绕一个轴旋转Three.js Vector3？ ，但它只是让一个Vector3点绕世界轴旋转？

我曾尝试使用matrixRotationWorld

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

但它不起作用，我不知道是我用错了还是有其他的方法..

那么，如何让3D立方体围绕世界轴旋转？

Answer 1

这是我使用的两个function。 它们基于matrix旋转。 并可以围绕任意轴旋转。 要使用世界坐标轴进行旋转，您需要使用第二个函数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); } 

所以你应该在你的anim函数（requestAnimFramecallback函数）中调用这些函数，导致x轴旋转90度：

 var xAxis = new THREE.Vector3(1,0,0); rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180); 

Answer 2

从版本r59开始，three.js提供了这三个函数来围绕对象轴旋转对象。

 object.rotateX(angle); object.rotateY(angle); object.rotateZ(angle); 

Answer 3

我需要rotateAroundWorldAxis函数，但上面的代码不适用于最新版本（r52）。 它看起来像getRotationFromMatrix()被getRotationFromMatrix()所取代

 function rotateAroundWorldAxis( object, axis, radians ) { var rotationMatrix = new THREE.Matrix4(); rotationMatrix.makeRotationAxis( axis.normalize(), radians ); rotationMatrix.multiplySelf( object.matrix ); // pre-multiply object.matrix = rotationMatrix; object.rotation.setEulerFromRotationMatrix( object.matrix ); } 

Answer 4

与r55你必须改变
rotationMatrix.multiplySelf（object.matrix）;
至
rotationMatrix.multiply（object.matrix）;

Answer 5

以防万一…在setEulerFromRotationMatrix该方法被称为setEulerFromRotationMatrix而不是getRotationFromMatrix

Answer 6

在Three.js R59中， object.rotation.setEulerFromRotationMatrix(object.matrix); 已经改为object.rotation.setFromRotationMatrix(object.matrix);

3js变化如此之快：D

Answer 7

在r59附近，这变得更容易了（围绕x旋转）：

 bb.GraphicsEngine.prototype.calcRotation = function ( obj, rotationX) { var euler = new THREE.Euler( rotationX, 0, 0, 'XYZ' ); obj.position.applyEuler(euler); } 

Answer 8

在Three.js R66中，这就是我使用的（CoffeeScript版本）：

 THREE.Object3D.prototype.rotateAroundWorldAxis = (axis, radians) -> rotWorldMatrix = new THREE.Matrix4() rotWorldMatrix.makeRotationAxis axis.normalize(), radians rotWorldMatrix.multiply this.matrix this.matrix = rotWorldMatrix this.rotation.setFromRotationMatrix this.matrix 

Answer 9

我这样解决了这个问题：

我为ThreeJS创build了“ObjectControls”模块，允许您旋转一个对象（或一个组），而不是SCENE。

包括库文件：

<script src="ObjectControls.js"></script>

用法：

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

你可以在这里find一个现场演示： https : //alberto-.github.io/threeJS-object-controls/

这里是回购： https ： //github.com/Alberto-/threeJS-object-controls 。