Creating a new object in three.js
In order to create a three.js mesh object, follow these steps:
var geometry = new THREE.BufferGeometry();
var standardMaterial = new THREE.MeshStandardMaterial( {/* inputs */ } );
var mesh = new THREE.Mesh( geometry, standardMaterial );
// Next, add the mesh as an object to the 3D scene.
Setting the transformation matrix
If you wish to set the transformation matrix of an object, use the code snippet below:
object = ... // Object is already created and passed around.
const pkm = ... // Contains 16 numbers (equivalent to 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 );
Issue with replacing the transformation matrix
The current method of setting the transformation matrix simply multiplies the new matrix with the existing matrix of the object. However, the requirement is to replace the existing matrix entirely with the new matrix.
What is the recommended best practice for completely replacing the existing matrix of a three.js object or mesh with a brand new one?
Attempts using AI chatbots
Various solutions recommended by AI tools like and were tested, but some of them failed, such as:
object.matrix = matrix;
object.matrixAutoUpdate = false;
object.updateMatrixWorld(true);
object.matrix.setFromMatrix4(matrix);
object.matrixWorldNeedsUpdate = true;
object.matrix.copy(matrix);
object.matrixWorldNeedsUpdate = true;
object.matrix.identity();
object.matrix.copy(newMatrix);
object.updateMatrixWorld(true);
object.matrix.set(pkm.X00, pkm.X01, ... )
object.matrixAutoUpdate = false;
object.updateMatrixWorld(true);