如何旋转轴上three.js所3D对象？如何旋转轴上three.js所3D对象？(How to ro

我对自己在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 [1...@shape.length]
    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）

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

我找到该页如何绕轴旋转的Vector3 three.js所？，但它只是让的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:

这里有两个功能我用。它们是基于矩阵旋转。并且可以绕任意轴。要旋转采用世界轴你想使用第二个函数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功能（requestAnimFrame回调），导致在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()被替换setEulerFromRotationMatrix()

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:

在three.js所R59， object.rotation.setEulerFromRotationMatrix(object.matrix); 已改为object.rotation.setFromRotationMatrix(object.matrix);

3JS变化如此之快：d

Answer 6:

万一......在R52的方法被称为setEulerFromRotationMatrix代替getRotationFromMatrix

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