08 Three.js 帮你做了什么

Instancing：一次 draw call 画一万个

同样的方块，分别用独立 Mesh 和 InstancedMesh 画出来。

绘制方式

每边数量20

2100

讲解

带下划线的数字可以左右拖动

const mesh = new THREE.InstancedMesh(  geometry, material, );for (let i = 0; i < count; i++) {  matrix.setPosition(x, 0, z);  mesh.setMatrixAt(i, matrix);}scene.add(mesh); // 1 次 draw call

draw calls–· 三角形–

draw callCPU 每次请求 GPU 画一批三角形。调用越多，CPU 越忙。

JS 这一侧

每个 Mesh 都是一次 draw call；InstancedMesh 一次调用画出成千上万个副本。

试一试

用「单独 Mesh」把数量调大，看 draw calls 增加
切到 InstancedMesh，draw calls 变成 1