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

粗线拾取

八条管线在空中交错,鼠标靠近哪条,哪条就变成琥珀色并加粗。 左下角显示命中的管线编号与到相机的距离,每条线的起点还有一个序号牌。

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

线拾取靠阈值

线没有厚度,射线几乎不可能正好穿过。所以 Raycaster 对线提供了 params.Line2.threshold,把「离射线多近算命中」变成可调参数。 示例设成 0.9 个世界单位,比线宽宽松,鼠标不必精确压线。

阈值太大时,多层管线叠在一起会频繁误选最近的那层; 太小则要在像素级对齐,操作很累。移动端指针粗,通常要放大到 1.5 倍左右。

项取值说明
阈值0.9世界单位,随场景尺度调整
命中反馈换色 + 加粗材质参数,无需重建几何体
线宽反馈4.5 → 7.5 px屏幕像素,粗线更醒目

为什么给每条线独立材质

高亮只作用于当前命中的那条,材质必须分开。如果八条线共用一个 LineMaterial,改颜色会让整组一起变色。 独立材质的代价是多几次状态切换,八条线完全无所谓, 上千条时就要改成改顶点色或额外画一层高亮线。

拾取要放在事件里降频。pointermove 一秒能触发上百次, 每次都遍历八条线的全部线段并不便宜。真做复杂管网时, 先用屏幕包围盒粗筛,再做射线求交。