如何在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(蓝色).由于不正确的转换四元数到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);

然后我发现THREE.Object3D上的神奇属性eulerOrder默认设置为“XYZ”，这导致了我的问题（有问题的附图），我的四元数-欧拉转换是为“YZX”设计的，所以我改变了它。

mesh.eulerOrder = 'YZX';

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

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