TroisJS

InstancedMesh

See InstancedMesh.ts and THREE.InstancedMesh.

Example :

<InstancedMesh ref="imesh" :count="500">
  <SphereGeometry :radius="5" />
  <PhongMaterial color="#ffffff" />
</InstancedMesh>

You can then init instance matrix in your component script :

const imesh = this.$refs.imesh.mesh;
const dummy = new Object3D();
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
for (let i = 0; i < 500; i++) {
  dummy.position.set(rndFS(200), rndFS(200), rndFS(200));
  const scale = rnd(0.2, 1);
  dummy.scale.set(scale, scale, scale);
  dummy.updateMatrix();
  imesh.setMatrixAt(i, dummy.matrix);
}
imesh.instanceMatrix.needsUpdate = true;

⚠ Don't use the same material on Mesh and InstancedMesh.