javascript - 在世界空间中保持局部旋转相同

Question

我有一个网格物体，它是 Object3D 的子物体，而 Object3D 又是场景的子物体。

Object3D 已旋转，假设沿 X 轴旋转 90 度。

子级没有应用旋转，并在其局部空间中保持 Y 向上和 Z 向前方向。

作为 THREE.js API 的菜鸟，我的问题是:保持 child 的旋转与世界 Y 轴对齐的最有效方法(就计算而言)是什么？

也就是说，如果其父级已沿 X 轴旋转 90 度，则应更新其子级的局部旋转，使其向上向量仍指向全局 Y 轴？

我可以获取对象的世界四元数来获取局部旋转和全局旋转之间的差异，然后进行局部调整吗？

嗯，我发现的最简单的技巧是反转父级的四元数并将其应用于子级，以便其局部旋转在世界空间中保持相同:

        var inv = mesh.parent.quaternion.clone(); 
        inv.conjugate();
        mesh.quaternion.copy(inv);

Answer 1

您希望子网格体保持正面朝上并与坐标轴对齐 - 即使网格体的父级旋转。

有几种方法可以做到这一点。什么是最好的，取决于您的用例或个人喜好。

您提出的解决方案无需克隆即可实现，如下所示:

mesh.quaternion.copy( mesh.parent.quaternion ).conjugate();

另一种方法是定义一个 onBeforeRender() 方法来修改网格的世界矩阵:

var func = function() {

    var v = new THREE.Vector3();

    return function func() {

        v.setFromMatrixPosition( this.matrixWorld );
        this.matrixWorld.makeTranslation( v.x, v.y, v.z );

        // or you could do this, instead
        //this.quaternion.copy( this.parent.quaternion ).conjugate();
        //this.updateMatrixWorld();

    };

}();

mesh.onBeforeRender = func;

三.js r.94