Disable Automatic Matrix Computation in Three.js

This article explains how to optimize performance in Three.js by disabling automatic matrix calculations for static 3D objects. You will learn how to set the matrixAutoUpdate property to false and how to manually update an object’s matrix when positional, rotational, or scale changes occur.

By default, Three.js automatically recalculates the local transformation matrix of every object in your scene graph on every single frame. This ensures that any changes to position, rotation, or scale are immediately rendered. However, for static objects that never move, this continuous calculation is unnecessary and wastes CPU cycles.

Step 1: Set matrixAutoUpdate to False

To completely disable the automatic matrix computation for any Object3D (such as meshes, groups, or lights), set its matrixAutoUpdate property to false.

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const staticMesh = new THREE.Mesh(geometry, material);

// Disable automatic matrix updates
staticMesh.matrixAutoUpdate = false;

scene.add(staticMesh);

Once this property is set to false, Three.js will ignore any direct changes to staticMesh.position, staticMesh.rotation, or staticMesh.scale during the render loop.

Step 2: Manually Update the Matrix When Needed

If you need to move or transform the static object initially, or if you modify it occasionally during runtime, you must manually trigger the matrix recalculation.

To update the object’s local matrix, call updateMatrix() immediately after making your changes:

// Modify the static object's properties
staticMesh.position.set(10, 5, -2);
staticMesh.rotation.y = Math.PI / 4;

// Manually recalculate the transformation matrix
staticMesh.updateMatrix();

Dealing with Hierarchies (Nested Objects)

If your static object is a child of another object and you need its world coordinates to update correctly, you should update its world matrix. Call updateMatrixWorld() on the object or its parent:

// Force update of the object's world matrix and all of its descendants
staticMesh.updateMatrixWorld(true);

By manually managing these updates for static environment assets, buildings, and background props, you can significantly reduce CPU overhead and improve the frame rate of your Three.js application.