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

Question

我对three.js中的旋转有很大的疑问，我想在我的游戏之一中旋转3D立方体。//initgeometry = new THREE.CubeGeometry grid, grid, gridmaterial = 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//[e-mail].y += y * Math.PI / [e-mail].x += x * Math.PI / [e-mail].z += z * Math.PI / 180并且（x，y，z）可以是（1、0、0）则多维数据集可以旋转，但是问题在于多维数据集绕其自身的轴旋转，因此旋转之后，它无法按预期旋转。我找到页面如何围绕轴旋转Three.js Vector3？，但是它只是让Vector3点绕世界轴旋转？而且我尝试使用matrixRotationWorld作为@mesh.matrixRotationWorld.x += x * Math.PI / [e-mail].y += y * Math.PI / [e-mail].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);