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.