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

线要素拾取

一张三千多段的线网,鼠标接近哪一段,哪一段就被琥珀色覆盖, 左下角列出这段的两个端点平面坐标。阈值滑杆控制松开到什么程度还能选中。

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

索引要除以二

LineSegments 的命中结果里,index 是顶点索引, 不是段号。段号等于索引除以二,因为每两个顶点构成一段。 用错这个换算,高亮会覆盖到相邻的段上。

高亮没有换材质,而是另画一段独立的线。这样原线网的颜色与透明度保持不变, 高亮线可以有自己的颜色和线宽,切换时只改六个浮点数。

项取值说明
线段数约 3300按行列条件跳过部分边
阈值0.45世界单位,可调 0.1 – 1.4
高亮几何2 个顶点位置每次命中时改写
读数端点 XZ与线的数据完全对应

为什么线网要有高差

所有线段都按 heightAt 抬到地形之上,而不是贴在同一个平面。 这样斜视时线段之间会自然产生前后关系,拾取才有意义; 若全部共面,射线会一次穿过几十段,只能取到最近的一段, 远处的线永远无法选中。

线拾取的值是「近似」。阈值范围内的任意一段都可能被命中, 鼠标稍微偏移就会跳到隔壁。业务上如果要精确选中一条完整的道路, 应该先按要素分组,再在组内用最近点排序,而不是靠单段命中。