3d - 如何在 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 使用了帮助并发现，三.Object3D 有属性四元数和 使用四元数 但它似乎不起作用，错误是由场景加载器引发的(可能是因为缺少“旋转”属性，请参阅最后的编辑):

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

我也尝试将四元数转换为欧拉角，但它对我不起作用，可能是因为其他角度应用顺序(我假设顺序为 Y、Z、X)。在上面的示例中，四元数表示绕 Z 轴(俯仰)旋转 135 度，该旋转转换为欧拉角 [pi,pi,pi/4]，但在场景中显示不正确。

下图显示了每个块在 Z 轴上比其他块旋转了 11 度。轴是 X(红色)、Y(绿色)和 Z(蓝色)。由于四元数到 Euclid 的转换不正确(我使用这个页面来实现: 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);

然后我发现了魔法属性 euler订单在 三.Object3D 默认设置为“XYZ”，这导致了我的问题(有问题的附加图像)，我的四元数-欧拉转换是为“YZX”设计的，所以我改变了它。

mesh.eulerOrder = 'YZX';

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

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