Instanced Mesh Grid
Assets & scale
Lesson 12 of 15
Draw hundreds of repeated objects with one geometry and one material.
Arrange 400 colored boxes with per-instance matrices and animate their heights in a traveling wave.
How this scene works
InstancedMesh stores a transform matrix for every copy while sharing one geometry and material. A temporary Object3D makes matrix construction familiar: set its transform, call updateMatrix, then setMatrixAt. Updating the matrix buffer requires instanceMatrix.needsUpdate. Per-instance colors use setColorAt. The bounding sphere is recomputed after the wave changes because CPU-side culling does not automatically know the new transforms. Inspect draw calls rather than assuming one mesh equals one draw call in every rendering setup.
Instanced Mesh Grid
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Increase countPerSide from 20 to 30 and inspect triangles and draw calls. Then make the wave travel along Z instead of diagonally.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
