javascript - 三个旋转的JS云台锁

Question

看来 Three JS 中的四元数旋转并没有摆脱 Gimbal Lock。

重现步骤：

1）打开三个JS编辑器。2）添加一个圆柱体并将z的值设置为1.57（旋转的中心文本框）。3) 现在尝试更改 y 或 x 弧度的值（旋转的左或右文本框）。

您会看到 x 和 y 都在执行相同的旋转。任何想法如何避免这种情况？

AFAIK Three JS 默认使用四元数，万向节锁定仅在您使用 eular 角时发生。

谢谢！

Answer 1

代码中：尝试在三个js中修改一个对象的四元数属性，而不是旋转属性。像这样，您可以确保通过使用四元数来避免万向节锁定。

在编辑器中只能用欧拉角进行编辑，而且由于许多欧拉角表示可能导致相同的四元数，因此旋转是不明确的；

Answer 2

如果您观察网格对象，则常规旋转 (mesh.rotation.set) 使用欧拉角。这将使用四元数将网格围绕 Y 轴旋转 90 度。

mesh.rotation.setFromQuaternion(some_quaternion, "XYZ", true);
var some_quaternion = new THREE.Quaternion();
some_quaternion.setFromAxisAngle(new THREE.Vector(0,1,0), Math.PI/2);