THREE.js将子网格与独立世界网格对齐

Question

网格对象"childCone_B“是网格对象"worldBox”的子对象，其方向连续随机更改。

我希望保持"childCone_B“的xyz轴与方向周期性变化的独立网格对象"worldCone”的xyz轴对齐。

worldBox.add(childCone_B); //... done once in initiation

//... done repeatedly in animation loop

childCone_B.lookAt(1,0,0);
childCone_B.quaternion.multiply( worldBox.getWorldQuaternion().inverse()  ); 
childCone_B.quaternion.multiply( worldCone.quaternion );

在最新的THREE.js Rev85中，我必须将lookAt参数更改为Vector3对象。

childCone_B.lookAt( new THREE.Vector3(1,0,0) );

但是现在childConeB对象不再将其xyz轴与worldCone对象的xyz轴对齐。相反，对齐是连续和渐进的变化，但没有明显的目标。

如何恢复所需的行为？

Answer 1

正如/u/WestLangley指出的，(i) lookAt(1,0,0)的原始用法是不正确的，(ii) Object3D.lookAt()不支持具有旋转和/或平移父对象的对象，以及(iii) object3D.getWorldQuaternion()在每次调用时都会创建一个新的四元数，除非提供现有的四元数作为参数。

下面的代码完成了这项工作。

//... one-off initiation
QQ = new THREE.Quaternion();

//... in the Animation loop

childCone_B.quaternion.set( 0, 0, 0, 1 );// .normalize() is not required.
childCone_B.quaternion.multiply( worldBox.getWorldQuaternion(QQ).inverse()  ); 
childCone_B.quaternion.multiply( worldCone.quaternion );

编辑

注意这里是object3D.getWorldQuaternion的源代码。它表明，如果我们不传递现有的四元数作为参数，那么它将在每次调用时创建一个新的四元数，这可能会降低性能。

getWorldQuaternion: function () 
{
    var position = new Vector3();
    var scale = new Vector3();
    return function getWorldQuaternion( optionalTarget ) 
    {
        var result = optionalTarget || new Quaternion();
        this.updateMatrixWorld( true );
        this.matrixWorld.decompose( position, result, scale );
        return result;
    };
}(),