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

Question

我正在研究 L 系统解释器，我使用四元数作为旋转的内部表示。我需要将结果导出到 ThreeJs JavaScript 场景，我发现 json 场景是实现此目的的最佳方法。

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

所以我使用了 http://thirdjs.org/io/s/quaternion 的帮助并发现， THREE.Object3D 具有属性 quaternion 和 useQuaternion 但它似乎不起作用，场景加载器引发错误（可能是因为缺少“旋转”属性，请参见编辑在最后）：

"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/）。

编辑：经过进一步检查，场景加载器引发的错误是因为对象上缺少“旋转”属性。以下输出不会引发错误并且场景已加载，但它是错误的（与所示图像相同），因为四元数旋转被忽略。

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

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 属性，那么它将解决我的问题的第二部分。

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