经纬志
首页 / three.js / 使用示例

实例化拾取

六十四乘六十四的方块阵列,鼠标扫过时被指到的那一个变成琥珀色。 点击可以把高亮锁定,再点空白处解除,左下角给出实例序号与网格坐标。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

命中结果里的 instanceId

对 InstancedMesh 求交,命中对象只有一个, 但结果里多了一个 instanceId,指明是第几个实例。 拿它去 setColorAt,就能只改那一块的颜色, 不需要拆成两千个独立对象。

instanceColor 是整块缓冲,改完要置 needsUpdate, 下一帧才会重新上传。示例每次只改两个实例的颜色, 上传的数据量由驱动决定,实际开销很小。

项取值说明
实例数204864 × 64 阵列
高亮色#ffd166与底色对比明显
还原按索引重算底色不需要额外的状态表
锁定单独记录一个索引与悬停互不干扰

高亮与锁定并存

悬停是瞬时的,鼠标移开就要还原;锁定是持久的,需要额外记一个索引。 两者会争用同一块颜色缓冲,示例的做法是每次设置悬停色之前, 先把锁定实例的颜色补回去,避免锁定被悬停覆盖。

还原色要能算出来。如果初始颜色来自复杂配色表, 最稳妥的做法是把初始颜色存在一个数组里,还原时直接取, 而不是用公式反推。示例的底色由行列位置算出,所以能省掉这个数组。