如何在 ThreeJS 中将网格旋转 90 度？

Posted 2023-02-27

【中文标题】如何在 ThreeJS 中将网格旋转 90 度？

【英文标题】：How can I rotate a mesh by 90 degrees in ThreeJS?

【发布时间】：2015-07-06 14:27:21

【问题描述】：

我有一个网格，我想在三个 JS 中旋转 90 度。 这是当前情况的图像：

我希望选定的网格与大网格平行旋转。 我试过像这样旋转矩阵：

matrix =   new THREE.Matrix4().makeRotationX(1.57)

但是网格会出现奇怪的旋转。有没有更简单的方法可以将它旋转 90 度？

【问题讨论】：

object.rotation.y = THREE.Math.degToRad(90);

【参考方案1】：

threejs 旋转使用弧度（您可能知道）

你可以用这个

mesh.rotation.x = Math.PI / 2;

或

mesh.rotation.set(new THREE.Vector3( 0, 0, Math.PI / 2));

【讨论】：

效果很好。谢谢！

mesh.rotation.set(new THREE.Vector3( 0, 0, Math.PI / 2)); 不适用于 r96。使用setFromVector3 而不是set

mesh.rotation.set(0, 0, Math.PI / 2) 可以使用 r101。将 rotation.set() 与 Vector3 一起使用会在属性 matrix 和 matrixWorld 中提供 NaN 值，这会使您的对象从场景中消失，在控制台中不显示任何内容。

这是因为mesh.rotation 是THREE.Euler 而不是THREE.Vector3，这是一个不同的对象类型。

【参考方案2】：

您可以使用此功能旋转对象：

function rotateObject(object, degreeX=0, degreeY=0, degreeZ=0) 
   object.rotateX(THREE.Math.degToRad(degreeX));
   object.rotateY(THREE.Math.degToRad(degreeY));
   object.rotateZ(THREE.Math.degToRad(degreeZ));


// usage:
rotateObject(myPlane, 40, 30, 20);

【讨论】：

不好 THREE.Math.degToRad() 或 THREE.Math.radToDeg()

这是低效的，因为它会触发 3 个矩阵乘法而不是 1 个。如果您想与单个网格进行交互，例如由用户进行操作，则可以，但如果您重复调用该网格以进行动画等操作，则不建议这样做......

【参考方案3】：

假设meshToRotate 需要在 X 轴上旋转 90 度。然后执行以下操作。

var meshToRotate = new THREE.Mesh( geometry, material );

//Rotating mesh by 90 degree in X axis.     
meshToRotate.rotateX( Math.PI / 2 );

【参考方案4】：

在r96上测试，也可以使用

mesh.rotation.setFromVector3(new THREE.Vector3( Math.PI / 2, 0, 0));

【讨论】：

mesh.rotation.set( Math.PI / 2, 0, 0 );

如果未启用自动更新，则需要调用mesh.updateMatrixWorld()

【参考方案5】：

将角度转换为弧度值：

let radian = 2 * Math.PI * (p_angle / 360); //p_angle = your angle, example; 90 or 12, whatever angle

【讨论】：

因为您是 *** 社区的新手。请按照指南格式化答案的代码部分。 ***.com/help/how-to-answer 这将提高可读性。