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

2022-01-24 00:00:00 javascript coffeescript three.js

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

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 [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)

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.

我找到页面 如何旋转三.js Vector3绕轴?，但它只是让Vector3点绕世界轴旋转?

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?

我已经尝试使用 ma​​trixRotationWorld 作为

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

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

推荐答案

这是我使用的两个函数.它们基于矩阵旋转.并且可以绕任意轴旋转.要使用世界坐标轴旋转，您需要使用第二个函数 rotateAroundWorldAxis().

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);
}

因此，您应该在 anim 函数(requestAnimFrame 回调)中调用这些函数，从而在 x 轴上旋转 90 度:

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);

相关文章