首页 / three.js / 使用示例
线要素拾取
一张三千多段的线网,鼠标接近哪一段,哪一段就被琥珀色覆盖, 左下角列出这段的两个端点平面坐标。阈值滑杆控制松开到什么程度还能选中。
源码与运行效果
索引要除以二
LineSegments 的命中结果里,index 是顶点索引,
不是段号。段号等于索引除以二,因为每两个顶点构成一段。
用错这个换算,高亮会覆盖到相邻的段上。
高亮没有换材质,而是另画一段独立的线。这样原线网的颜色与透明度保持不变, 高亮线可以有自己的颜色和线宽,切换时只改六个浮点数。
| 项 | 取值 | 说明 |
|---|---|---|
| 线段数 | 约 3300 | 按行列条件跳过部分边 |
| 阈值 | 0.45 | 世界单位,可调 0.1 – 1.4 |
| 高亮几何 | 2 个顶点 | 位置每次命中时改写 |
| 读数 | 端点 XZ | 与线的数据完全对应 |
为什么线网要有高差
所有线段都按 heightAt 抬到地形之上,而不是贴在同一个平面。
这样斜视时线段之间会自然产生前后关系,拾取才有意义;
若全部共面,射线会一次穿过几十段,只能取到最近的一段,
远处的线永远无法选中。
线拾取的值是「近似」。阈值范围内的任意一段都可能被命中, 鼠标稍微偏移就会跳到隔壁。业务上如果要精确选中一条完整的道路, 应该先按要素分组,再在组内用最近点排序,而不是靠单段命中。