首页 / three.js / 使用示例
粗线管网
十四条空间折线构成的管网,线宽以屏幕像素计,从 1 到 14 像素自由调整。 打开流动虚线后,虚线相位持续推移,用来表达管线里的流向。
源码与运行效果
为什么不用 linewidth
WebGL 的 gl.lineWidth 在多数驱动上只支持 1,写 5 也会被忽略。
Line2 换了个思路:把每段线扩展成一排面向相机的四边形,
在着色器里按 linewidth 换算成像素宽度。视觉上是粗线,
底层其实是三角形。
LineMaterial 必须知道画布的实际像素尺寸,否则线宽会被拉伸成椭圆。
窗口尺寸变化时必须同步 material.resolution,
示例在 resize 里统一处理了这件事。
| 项 | 设置 | 说明 |
|---|---|---|
| 几何体 | LineGeometry | 内部转成实例化线段 |
| 线宽 | 1 – 14 px | 屏幕像素,与相机距离无关 |
| 虚线 | dashed | 需 computeLineDistances() |
| 偏移 | dashOffset | 每帧递减即形成流动效果 |
流动效果的成本
改 dashOffset 只更新一个 uniform,几何体和材质都不用重编。
每条线都是独立的绘制调用,十四条毫无压力;上百条时,
把相同线宽的管线合并成一个 LineSegmentsGeometry,调用次数会明显下降。
端点要补圆头。粗线在拐点处会露出方形缺口。 常见做法是在每个折点放一个小球或圆片当接头, 示例里的金属节点既是装饰,也顺手盖住了接缝。