首页 / three.js / 使用示例
实例化拾取
六十四乘六十四的方块阵列,鼠标扫过时被指到的那一个变成琥珀色。 点击可以把高亮锁定,再点空白处解除,左下角给出实例序号与网格坐标。
源码与运行效果
命中结果里的 instanceId
对 InstancedMesh 求交,命中对象只有一个,
但结果里多了一个 instanceId,指明是第几个实例。
拿它去 setColorAt,就能只改那一块的颜色,
不需要拆成两千个独立对象。
instanceColor 是整块缓冲,改完要置 needsUpdate,
下一帧才会重新上传。示例每次只改两个实例的颜色,
上传的数据量由驱动决定,实际开销很小。
| 项 | 取值 | 说明 |
|---|---|---|
| 实例数 | 2048 | 64 × 64 阵列 |
| 高亮色 | #ffd166 | 与底色对比明显 |
| 还原 | 按索引重算底色 | 不需要额外的状态表 |
| 锁定 | 单独记录一个索引 | 与悬停互不干扰 |
高亮与锁定并存
悬停是瞬时的,鼠标移开就要还原;锁定是持久的,需要额外记一个索引。 两者会争用同一块颜色缓冲,示例的做法是每次设置悬停色之前, 先把锁定实例的颜色补回去,避免锁定被悬停覆盖。
还原色要能算出来。如果初始颜色来自复杂配色表, 最稳妥的做法是把初始颜色存在一个数组里,还原时直接取, 而不是用公式反推。示例的底色由行列位置算出,所以能省掉这个数组。