首页 / three.js / 使用示例
批量线段
一张八十五乘八十五的路网,横向纵向各一段,共三万四千个线段。 全部塞进一个缓冲,一次绘制调用画完,拖动滑杆可以按比例放开。
源码与运行效果
端点不共享
LineSegments 的语义是「每两个顶点一段」,相邻段之间没有连接关系。
因此同一个路口节点会被重复写进四条线段,顶点数正好是线段数的两倍。
若用 Line 加索引,节点只存一次,但连线必须首尾相接,
路网这种分叉结构没法用一个索引序列表达。
每段两端的颜色可以不同:示例让起点亮、终点暗,视觉上能读出方向感。
颜色与位置等长,都是 Float32Array,写进两个属性后
vertexColors 打开即可。
| 项 | 规模 | 说明 |
|---|---|---|
| 网格 | 85 × 85 | 每格两条线段 |
| 线段 | 34,000 | 顶点数 68,000 |
| 缓冲 | 约 1.6 MB | position + color 各一份 |
| 绘制调用 | 1 | 与线段数量无关 |
drawRange 的单位是顶点
滑杆给出的是线段比例,换算成顶点数时要乘二。
如果按线段数直接设 drawRange,画面会在某一段的中间截断,
出现只有起点、没有终点的孤点,看起来像随机噪点。
透明线段的排序问题。示例开了透明度,密集区域叠起来会更亮。 需要严格的遮挡关系时关掉透明,或者给线加一点高度偏移, 让它们在地形上方分层排布。