How do I use instancing in Three.js?

How do I use instancing in Three.js?

Instancing in Three.js allows you to render many objects with a single draw call, improving performance. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

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

const instancedMesh = new THREE.InstancedMesh(geometry, material, count);

for (let i = 0; i < count; i++) {
    const matrix = new THREE.Matrix4();
    matrix.setPosition(Math.random() * 10, Math.random() * 10, Math.random() * 10);
    instancedMesh.setMatrixAt(i, matrix);
}

scene.add(instancedMesh);

This creates 100 instances of a box at random positions.

What are the benefits of using instancing?

The main benefits are reduced draw calls, improved performance, and better memory usage, especially for large numbers of objects.

Are there any limitations to instancing?

Yes, instancing can limit the variety of materials and shaders you can use, as all instances share the same material.