首页 / three.js / 使用示例
动态实例化
六十四乘六十四根柱子，共享同一份几何体。每帧按行波相位改写实例矩阵， 画面出现从中心向外扩散的起伏，颜色按初始高度分配。
源码与运行效果
每帧改的是矩阵
实例化把「几何体」与「每个实例的变换」分开：几何体只上传一次， 四千零九十六份位置、旋转、缩放在一块矩阵缓冲里。 改写缩放分量就相当于让柱子长高，几何体本身没有任何变化。
因为每帧都要改，构造时把 instanceMatrix 的用途标成
DynamicDrawUsage，驱动会把这块缓冲放到更适合频繁更新的位置。
静态的散布场景则不需要这个标记。
| 项 | 取值 | 说明 |
|---|---|---|
| 实例数 | 4096 | 单次绘制调用 |
| 几何体 | 0.26 × 1 × 0.26 | 底面平移到原点，缩放即生长 |
| 每帧写入 | 4096 × 16 浮点 | 约二十六万次浮点运算 |
| 颜色 | 实例色 | 初始化时写入，之后不再改 |
底面必须在原点
默认的 BoxGeometry 以中心为原点，直接缩放会让柱子一半扎进地里、
一半悬空。构造后立刻 translate(0, 0.5, 0)，
把底面对齐到 y = 0，这样 scale.y 才是从地面向上生长。
实例数上千就别逐个改颜色。颜色缓冲每帧上传同样有成本。
示例只在初始化时写一次 instanceColor，
动画仅改矩阵，帧率稳定得多。