THREEjs, updating an object's matrix doesnt change it's position and rotation params

Question

I want to set a transformation matrix to an object upon creation and then control it by position, rotation and scale, but while changing the matrix does change the object in world space, it's position parameter still remains 0, 0, 0.

let mesh =  new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshPhongMaterial({color:0xf15728})
)
this.scene.add(mesh)

let pos = new THREE.Vector3().setFromMatrixPosition(m)

mesh.matrixAutoUpdate = false
mesh.matrix.copy(m)

// ***************//
mesh.updateMatrix()
// ***************//

console.log("mesh.position", mesh.position)
console.log("pos", pos)

Here's the output for the values of both pos and mesh.position

Garrett Johnson Garrett Johnson · Accepted Answer · 2020-11-02T13:06:34

Updating an objects matrix does not update its position or rotation fields and by default three.js will update the matrix based on the position, rotation, and scale values before rendering (which you've disabled by setting matrixAutoUpdate to false).

If you would like to initialize an objects transformation from a matrix you can use the Matrix4.decompose function like so:

// m is the initial local matrix transform
m.decompose(
  mesh.position,
  mesh.quaternion,
  mesh.scale,
);

Also if you keep mesh.matrixAutoUpdate = false you will have to call mesh.updateMatrix() before rendering whenever the position, rotation, or scale values are changed.

You can read more on how matrix transformations work here.

THREEjs, updating an object's matrix doesnt change it's position and rotation params

1 Answers