Line2NodeMaterial
Line2NodeMaterial
Removes WebGL’s 1‑pixel line-width limit by rendering lines as instanced meshes, enabling custom widths and styles (e.g., dashed). [2]
Core Advantages
Breaks the 1‑pixel cap and lets you define thickness in screen pixels or world units, essential for CAD, data visualization, and stylized rendering. [1]
Common Uses
Engineering drawings and outlines in CAD/arch‑viz
Connections in charts and network graphs
Interactive gizmos or helpers in 3D editors
Stylized lines such as toon outlines or glow effects
How to adjust
Toggle worldUnits to switch between pixel and world‑space width. Set dashed to true and animate dashOffset for a marching‑ants effect. Connect a noise node to lineColorNode to create flowing color patterns along the line.
Code Examples
1// 1) Define line geometry
2const lineGeometry = new LineGeometry();
3lineGeometry.setPositions([ 0, 0, 0, 10, 10, 0, 10, 0, -5 ]);
4
5// 2) Create Line2 and apply the material
6const wideLine = new Line2( lineGeometry, new Line2NodeMaterial({
7 color: 0xff00ff, // line color
8 linewidth: 5, // 5px line width
9 dashed: false // solid line
10}) );
11wideLine.computeLineDistances(); // needed for dashed lines