如何在Three.js的JSON场景中使用四元数旋转

Question

我正在开发L系统解释器，并使用四元数作为旋转的内部表示。我需要将结果导出到ThreeJs JavaScript场景中，我发现json场景是实现这一目标最好的方式。

我在https://github.com/mrdoob/three.js/blob/master/examples/scenes/test_scene.js找到了一个场景的示例，但没有关于四元数旋转的内容。

因此，我在http://threejs.org/io/s/quaternion上寻求帮助，并发现 THREE.Object3D 具有属性 quaternion 和 useQuaternion ，但它似乎无法正常工作，场景加载程序会引发错误（可能是由于缺少“ rotation”属性，参见末尾的EDIT）：

"obj": {
    ...
    "quaternion": [0.38268343236509,0,0,0.923879532511287],
    "useQuaternion": true
}

我尝试将四元数转换为欧拉角，但是无法实现，可能是因为应用角度的顺序不同（我假设顺序为Y、Z、X）。在上面的例子中，四元数表示绕Z轴（俯仰）旋转135度，这被转换为欧拉角[pi,pi,pi/4]，但在场景中显示不正确。

下图显示了每个块通过Z轴旋转比其他块多11度。轴是X（红色）、Y（绿色）和Z（蓝色）。由于将四元数错误地转换为欧几里得，所以上半部分被错误地旋转（我使用了这个页面进行实现：http://www.euclideanspace.com/maths/geometry/rotations/conversions/quaternionToEuler/）。
编辑：经过进一步检查，场景加载器引发的错误是因为对象缺少“rotation”属性。以下输出不会引发错误并且场景已加载，但是它是错误的（与图像显示的方式相同），因为四元数旋转被忽略了。

"obj": {
    ...
    "rotation": [3.14159265358979,3.14159265358979,0.785398163397449],
    "quaternion": [0.38268343236509,0,0,0.923879532511287],
    "useQuaternion": true
}

- NightElfik

---

场景加载器引发的错误消息中是否还有更多内容，特别说明它不喜欢四元数的使用方面有什么问题？ - Ben P

好的，错误是由于缺少“rotation”属性引起的。场景加载器可能根本不会加载四元数旋转。 - NightElfik

Answer 1

我想我解决了我的问题。这不是直接回答我的问题，而是我是如何解决它的。

问题在场景加载器中，它不能处理四元数旋转。我重写了场景生成脚本，在JS中直接生成场景。

var mesh = new THREE.Mesh(geometry, material);
... set position & scale ...
mesh.rotation.x = 3.141;
mesh.rotation.y = 3.141;
mesh.rotation.z = 0.785;
mesh.updateMatrix();
scene.add(mesh);

然后我在THREE.Object3D上找到了神奇的属性eulerOrder，默认设置为“XYZ”，这正是导致我的问题（附带问题中的图片）的原因。我的四元数-欧拉角转换是针对“YZX”设计的，所以我进行了更改。

mesh.eulerOrder = 'YZX';

就这样。我没有时间尝试场景加载器，但是如果可以使用场景加载器设置eulerOrder属性，则它将成为解决我问题的第二部分的方法。

最好的方法是直接在场景定义中设置四元数，但这可能需要更改场景加载器本身。

- NightElfik