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

粗线管网

十四条空间折线构成的管网,线宽以屏幕像素计,从 1 到 14 像素自由调整。 打开流动虚线后,虚线相位持续推移,用来表达管线里的流向。

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

为什么不用 linewidth

WebGL 的 gl.lineWidth 在多数驱动上只支持 1,写 5 也会被忽略。 Line2 换了个思路:把每段线扩展成一排面向相机的四边形, 在着色器里按 linewidth 换算成像素宽度。视觉上是粗线, 底层其实是三角形。

LineMaterial 必须知道画布的实际像素尺寸,否则线宽会被拉伸成椭圆。 窗口尺寸变化时必须同步 material.resolution, 示例在 resize 里统一处理了这件事。

项设置说明
几何体LineGeometry内部转成实例化线段
线宽1 – 14 px屏幕像素,与相机距离无关
虚线dashed需 computeLineDistances()
偏移dashOffset每帧递减即形成流动效果

流动效果的成本

改 dashOffset 只更新一个 uniform,几何体和材质都不用重编。 每条线都是独立的绘制调用,十四条毫无压力;上百条时, 把相同线宽的管线合并成一个 LineSegmentsGeometry,调用次数会明显下降。

端点要补圆头。粗线在拐点处会露出方形缺口。 常见做法是在每个折点放一个小球或圆片当接头, 示例里的金属节点既是装饰,也顺手盖住了接缝。