完全替换three.js object/mesh的变换矩阵

Question

创建对象

创建了一个three.js网格对象：

    var geometry = new THREE.BufferGeometry();

    var standardMaterial = new THREE.MeshStandardMaterial( {/* inputs */ } );

    var mesh = new THREE.Mesh( geometry, standardMaterial );

    // Then mesh is added as an object to 3D scene.

设置变换矩阵

我打算设置物体的变换矩阵：

            object = ... // Is already created and passed around.

            const pkm = ... // Containing 16 numbers, equivalent of a 4x4 matrix.

            var matrix = new THREE.Matrix4();

            matrix.set(
                pkm.X00, pkm.X01, pkm.X02, pkm.X03,
                pkm.X10, pkm.X11, pkm.X12, pkm.X13,
                pkm.X20, pkm.X21, pkm.X22, pkm.X23,
                pkm.X30, pkm.X31, pkm.X32, pkm.X33,
            );

            object.applyMatrix4( matrix );
            object.updateMatrixWorld( true );

问题

问题在于，上述设置变换矩阵的方法只是将new矩阵与对象的previous矩阵相乘。但是我们想让previous矩阵完全被new矩阵代替。

什么是最佳实践 - 最稳健的方法 - 将 three.js 对象/网格的 previous 矩阵替换为完全 new 矩阵？

Answer 1

要用一个全新的替换three.js对象/网格之前的矩阵，您可以直接设置对象的

matrix

属性，然后禁用

matrixAutoUpdate

属性。这样变换矩阵就不会和之前的矩阵相乘了，直接使用新的矩阵

这里是修改后的代码：

object = ... // Is already created and passed around.

const pkm = ... // Containing 16 numbers, equivalent of a 4x4 matrix.

var matrix = new THREE.Matrix4();

matrix.set(
    pkm.X00, pkm.X01, pkm.X02, pkm.X03,
    pkm.X10, pkm.X11, pkm.X12, pkm.X13,
    pkm.X20, pkm.X21, pkm.X22, pkm.X23,
    pkm.X30, pkm.X31, pkm.X32, pkm.X33,
);

object.matrix = matrix;
object.matrixAutoUpdate = false;
object.updateMatrixWorld(true);

通过设置

object.matrixAutoUpdate = false

，您告诉three.js 不要根据对象的位置、旋转和缩放属性自动更新对象的矩阵。相反，您提供的矩阵将直接用于对象的转换。最后，您需要调用

object.updateMatrixWorld(true)

来更新世界矩阵并将更改传播到对象的子对象（如果有）。

这种方法应该是用一个全新的矩阵替换 three.js 对象/网格的先前矩阵的最稳健的方法，因为它直接设置所需的矩阵而没有任何乘法或先前矩阵的干扰。