Three.js · 6 / 6

Dashboard
Module 6 · InstancedMesh

Many objects, fewer draw calls

Thousands of identical meshes can tank performance — each mesh may mean extra GPU work. THREE.InstancedMesh shares one geometry + material and stores per-instance transforms in matrices. Creative coding patterns: fields of gems, crowds of particles-as-meshes, city blocks — profile before shipping heavy scenes on mobile. 

const mesh = new THREE.InstancedMesh(geometry, material, count);
const dummy = new THREE.Object3D();
for (let i = 0; i < count; i++) {
  dummy.position.set(...);
  dummy.updateMatrix();
  mesh.setMatrixAt(i, dummy.matrix);
}
mesh.instanceMatrix.needsUpdate = true;
scene.add(mesh);
Recap

Scene graph → lights → motion → interaction → scale. Explore docs & examples at threejs.org — same Coffee Academy habits apply.

Done

You finished the Three.js track — revisit demos anytime from this hub.