三个JS万向节锁旋转

时间:2014-04-07 13:53:41

标签: javascript rotation three.js quaternions euler-angles

似乎三个JS中的四元数旋转并非从Gimbal Lock中解脱出来。

重现的步骤:

1)打开Three JS Editor。 2)添加圆柱体并将z的值设置为1.57(旋转中心文本框)。 3)现在尝试更改y或x弧度的值(旋转的左或右文本框)。

您会看到x和y都执行相同的旋转。任何想法如何避免?

AFAIK Three JS默认使用四元数,只有在使用圆角时才会发生万向节锁定。

谢谢!

2 个答案:

答案 0 :(得分:0)

在代码中:尝试用三个js而不是rotation属性修改对象的四元数属性。就像那样,你可以通过使用四元数来避免万向节锁定。

在编辑器中,您只能使用欧拉角进行编辑,并且由于许多欧拉角表示可能会产生相同的四元数,因此旋转不明确;

答案 1 :(得分:-1)

如果观察网格对象,则常规旋转(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);