threejs-perf

You can reduce draw calls in Three.js by replacing individual Mesh instances with InstancedMesh to batch thousands of objects into a single draw call. This minimizes CPU overhead from per-object transforms and is ideal for scenes with 100 or more repeated objects.

The best way to update moving entities is using InstancedMesh with batched setMatrixAt writes and Matrix4 reuse. Instead of per-object transforms, you update instanceMatrix.needsUpdate once per frame to handle thousands of moving entities efficiently without high CPU overhead.

You need InstancedMesh when your Three.js scene has 100 or more repeated objects or thousands of moving entities where high draw calls and per-object transforms create CPU overhead. It batches transforms to dramatically reduce rendering bottlenecks.

Yes, Three.js InstancedMesh supports both static and moving patterns. For static object sets, you batch up to 19,600 objects into a single draw call. For moving entities, you apply batched setMatrixAt writes and toggle instanceMatrix.needsUpdate to update transforms efficiently.

Your Three.js scene lags because individual Mesh instances generate high draw calls and CPU overhead from per-object transforms. Replacing them with InstancedMesh batches all objects into a single draw call, eliminating the transform bottleneck and restoring rendering performance.

Yes, using InstancedMesh for moving entities requires knowledge of Matrix4 reuse and batched setMatrixAt writes. You must update instanceMatrix.needsUpdate to apply transforms, making matrix operations essential for efficient data-driven updates in Three.js.