threejs-errors-performance

Three.js memory leaks are fixed by calling dispose() on geometries, materials, textures, render targets, and controls when objects are removed. Monitor renderer.info.memory for continuously growing geometry or texture counts, which indicates undisposed GPU resources.

Reduce draw calls by using InstancedMesh for repeated objects, BatchedMesh for heterogeneous geometry, and mergeGeometries from BufferGeometryUtils for static objects. Keep draw calls under 100 for 60 FPS; over 500 is critical.

Use InstancedMesh when rendering more than about 100 copies of the same geometry and material combination. It renders thousands of instances in a single draw call, but remember to set instanceMatrix.needsUpdate = true after setMatrixAt.

Instances render at the origin because instanceMatrix.needsUpdate was not set to true after calling setMatrixAt. The setMatrixAt method only writes to the CPU-side array; the needsUpdate flag triggers the GPU upload.

No, Three.js GPU resources are not automatically garbage collected by JavaScript. You must manually call dispose() on BufferGeometry, Material, Texture, WebGLRenderTarget, and controls to free GPU memory and DOM event listeners.

Stuttering is often caused by allocating Vector3, Matrix4, or other objects inside the animation loop, triggering garbage collection pauses. Declare temporary math objects outside the loop and reuse them each frame.