Chapter 65: LineMaterial

Core Idea

A material for drawing wireframe-style geometries.

Unlike LineBasicMaterial, it supports arbitrary line widths and allows using world units instead of screen space units. This material is used with LineSegments2 and Line2.

This module can only be used with WebGLRenderer. When using WebGPURenderer, use Line2NodeMaterial.

Key Concepts

• alphaToCoverage : boolean: Whether to use alphaToCoverage or not. When enabled, this can improve the anti-aliasing of line edges when using MSAA.
• color : Color: The material's color.
• dashOffset : number: Where in the dash cycle the dash starts.
• dashScale : number: The scale of the dashes and gaps.
• dashSize : number: The size of the dash.
• dashed : boolean: Whether the line is dashed, or solid.
• gapSize : number: The size of the gap.
• isLineMaterial : boolean (readonly): This flag can be used for type testing.
• linewidth : number: Controls line thickness in CSS pixel units when worldUnits is false (default), or in world units when worldUnits is true.
• opacity : number: The opacity.

Code Examples

import { LineMaterial } from 'three/addons/lines/LineMaterial.js';

• What it demonstrates: Typical usage of LineMaterial.

Reference Tables

Constructor

Signature
new LineMaterial( parameters : Object )

Properties

Property	Description
.alphaToCoverage : boolean	Whether to use alphaToCoverage or not. When enabled, this can improve the anti-aliasing of line edges when using MSAA.
.color : Color	The material's color.
.dashOffset : number	Where in the dash cycle the dash starts.
.dashScale : number	The scale of the dashes and gaps.
.dashSize : number	The size of the dash.
.dashed : boolean	Whether the line is dashed, or solid.
.gapSize : number	The size of the gap.
.isLineMaterial : boolean (readonly)	This flag can be used for type testing.
.linewidth : number	Controls line thickness in CSS pixel units when worldUnits is false (default), or in world units when worldUnits is true.
.opacity : number	The opacity.
.resolution : Vector2	The size of the viewport, in screen pixels. This must be kept updated to make screen-space rendering accurate. The LineSegments2.onBeforeRender callback performs the update for visible objects.
.worldUnits : boolean	Whether the material's sizes (width, dash gaps) are in world units.

Key Takeaways

1. LineMaterial extends: EventDispatcher → Material → ShaderMaterial
2. Most relevant properties: alphaToCoverage, color, dashOffset, dashScale.

Connects To

• EventDispatcher: parent class
• Material: parent class
• ShaderMaterial: parent class
• Source: examples/jsm/lines/LineMaterial.js