Line2NodeMaterial
Line2NodeMaterial
解决了 WebGL 中标准线条宽度只能为 1 像素的限制,通过将线条渲染为实例化的网格,从而实现可自定义宽度和样式(如虚线)的宽线条效果。 [2]
核心优势
突破 WebGL 1 像素线宽的限制,允许开发者按屏幕像素或世界单位自由定义线条粗细,对于 CAD、数据可视化和风格化渲染至关重要。 [1]
常见用途
CAD 或建筑可视化中的工程图、轮廓线
数据图表与网络拓扑图中的连接线
3D 编辑器中的交互式 Gizmo 或辅助工具
卡通描边、辉光等艺术性渲染中的线条
如何调整
切换 worldUnits 属性可改变线宽单位(屏幕像素或世界单位)。将 dashed 设为 true 并持续修改 dashOffset 值,可以创建沿路径移动的“行军蚁”动画效果。为 lineColorNode 连接一个噪波节点,可以创造出沿线条流动的复杂色彩纹理。
代码示例
1// 1. 定义线段的几何体
2const lineGeometry = new LineGeometry();
3lineGeometry.setPositions([ 0, 0, 0, 10, 10, 0, 10, 0, -5 ]);
4
5// 2. 创建 Line2 对象并应用材质
6const wideLine = new Line2( lineGeometry, new Line2NodeMaterial({
7 color: 0xff00ff, // 设置线条颜色
8 linewidth: 5, // 设置线条宽度为 5 像素
9 dashed: false // 设置为实线
10}) );
11wideLine.computeLineDistances(); // 为虚线功能计算距离