LineDashedNodeMaterial
Node version of LineDashedMaterial for programmable dashed effects on line-based geometry.
Core Advantages
Lets you drive dash length, gap size, scale, and offset via nodes, enabling dynamic and complex dash patterns such as time-varying or position-dependent dashes that the standard LineDashedMaterial cannot achieve.
Common Uses
Selection boxes or dashed outlines
Hidden lines in engineering/architectural visualization
Animating routes or motion paths
UI elements with animated dash effects
How to adjust
Tune color, linewidth, scale, dashSize, and gapSize for appearance. Important: call computeLineDistances() on the Line or LineSegments instance or the dashes will not render. For advanced control, feed offsetNode, dashScaleNode, dashSizeNode, and gapSizeNode from other nodes (e.g., timer() or positionGeometry) to drive animation or spatial variation.
Code Examples
1// Plain JS version (imports and setup omitted)
2const box = new THREE.BoxGeometry();
3const edges = new THREE.EdgesGeometry(box);
4const material = new LineDashedNodeMaterial({
5 color: 'cyan',
6 linewidth: 1,
7 scale: 1,
8 dashSize: 0.1,
9 gapSize: 0.05
10});
11const line = new THREE.LineSegments(edges, material);
12// Important: compute distances to enable dashed rendering
13line.computeLineDistances();
14scene.add(line);