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

批量线段

一张八十五乘八十五的路网,横向纵向各一段,共三万四千个线段。 全部塞进一个缓冲,一次绘制调用画完,拖动滑杆可以按比例放开。

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

端点不共享

LineSegments 的语义是「每两个顶点一段」,相邻段之间没有连接关系。 因此同一个路口节点会被重复写进四条线段,顶点数正好是线段数的两倍。 若用 Line 加索引,节点只存一次,但连线必须首尾相接, 路网这种分叉结构没法用一个索引序列表达。

每段两端的颜色可以不同:示例让起点亮、终点暗,视觉上能读出方向感。 颜色与位置等长,都是 Float32Array,写进两个属性后 vertexColors 打开即可。

项规模说明
网格85 × 85每格两条线段
线段34,000顶点数 68,000
缓冲约 1.6 MBposition + color 各一份
绘制调用1与线段数量无关

drawRange 的单位是顶点

滑杆给出的是线段比例,换算成顶点数时要乘二。 如果按线段数直接设 drawRange,画面会在某一段的中间截断, 出现只有起点、没有终点的孤点,看起来像随机噪点。

透明线段的排序问题。示例开了透明度,密集区域叠起来会更亮。 需要严格的遮挡关系时关掉透明,或者给线加一点高度偏移, 让它们在地形上方分层排布。