首页 / three.js / 使用示例
粗线拾取
八条管线在空中交错,鼠标靠近哪条,哪条就变成琥珀色并加粗。 左下角显示命中的管线编号与到相机的距离,每条线的起点还有一个序号牌。
源码与运行效果
线拾取靠阈值
线没有厚度,射线几乎不可能正好穿过。所以 Raycaster 对线提供了
params.Line2.threshold,把「离射线多近算命中」变成可调参数。
示例设成 0.9 个世界单位,比线宽宽松,鼠标不必精确压线。
阈值太大时,多层管线叠在一起会频繁误选最近的那层; 太小则要在像素级对齐,操作很累。移动端指针粗,通常要放大到 1.5 倍左右。
| 项 | 取值 | 说明 |
|---|---|---|
| 阈值 | 0.9 | 世界单位,随场景尺度调整 |
| 命中反馈 | 换色 + 加粗 | 材质参数,无需重建几何体 |
| 线宽反馈 | 4.5 → 7.5 px | 屏幕像素,粗线更醒目 |
为什么给每条线独立材质
高亮只作用于当前命中的那条,材质必须分开。如果八条线共用一个
LineMaterial,改颜色会让整组一起变色。
独立材质的代价是多几次状态切换,八条线完全无所谓,
上千条时就要改成改顶点色或额外画一层高亮线。
拾取要放在事件里降频。pointermove 一秒能触发上百次,
每次都遍历八条线的全部线段并不便宜。真做复杂管网时,
先用屏幕包围盒粗筛,再做射线求交。