Search code examples
javascriptthree.js3dtransformationmatrix-multiplication

Three.js Reseting Matrix before Transformation


I want to apply the same matrix transformation to a three.js mesh multiple times, but I only ever want the transformation as describe by the first transform. How can I "reset" the mesh's matrix to its pre transformation value before I re-apply the transformation?

I have tried the following, but it hasn't worked

const identity = model.matrix.identity();
model.matrix = identity;
model.matrixWorld = identity;
model.updateMatrix();
model.updateMatrixWorld();
model.applyMatrix4(newMatrix);

Solution

  • EDIT: Replacing my entire answer because I was unaware that Object3D.applyMatrix4 updates the position/quaterion/scale properties in addition to modifying the matrix.

    The easiest way to approach this is to back-up the model's original matrix property, and copy it back in place before the next update. This can be accomplished using Object3D.userData.

    // before doing any updates, ensure the local matrix is set from postion/quaternion/scale:
    model.updateMatrix();
    
    // back-up the matrix:
    model.userData.originalMatrix = model.matrix.clone();
    
    // reset the model before each update
    model.userData.originalMatrix.decompose( model.position, model.quaternion, model.scale );
    model.matrix.copy( model.userData.originalMatrix );