Chapter 813: Drawing Lines (Manual)

Core Idea

How to draw a plain line (not a wireframe mesh) using LineBasicMaterial or LineDashedMaterial combined with a geometry made from an ordered list of vertices.

Key Concepts

• LineBasicMaterial / LineDashedMaterial: the two material types for line rendering; a regular mesh material won't work.
• Line geometry: just an ordered list of vertices — no faces are involved.
• Open by default: three.js draws a segment between each consecutive pair of vertices, but not between the last and first — the path is not closed automatically.
• Line object: combines a geometry and a line material, and is added to the scene the same way a Mesh is.

Code Examples

const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
const points = [
  new THREE.Vector3(-1, 0, 0),
  new THREE.Vector3(0, 1, 0),
  new THREE.Vector3(1, 0, 0),
];
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material);
scene.add(line);

• What it demonstrates: minimal setup for a two-segment line (an upward-pointing arrow shape) from an ordered list of points.

Key Takeaways

1. Lines need LineBasicMaterial or LineDashedMaterial, not a regular mesh material.
2. A line's geometry is just an ordered list of vertices; three.js connects each consecutive pair.
3. The path is open by default — there's no automatic segment from the last vertex back to the first.
4. A Line object (geometry + line material) is added to the scene exactly like a Mesh.

Connects To

• LineBasicMaterial / LineDashedMaterial: the reference chapters for the two line material types.
• BufferGeometry: the geometry type lines are built from.