How to Draw Lines in Three.js with LineBasicMaterial

This article explores the fundamentals of LineBasicMaterial in Three.js, a popular JavaScript library used to create 3D graphics in the browser. You will learn what this material is, its key properties, and how Three.js uses vertices and geometries to connect points and render lines in a 3D scene.

What is LineBasicMaterial?

In Three.js, LineBasicMaterial is a specialized material designed specifically for drawing non-shaded, wireframe-style lines. Unlike standard materials used for 3D meshes (such as MeshStandardMaterial), LineBasicMaterial is not affected by light sources in the scene. It renders with a flat, consistent color regardless of scene illumination.

Key Properties of LineBasicMaterial

• color: Defines the color of the line. It accepts hexadecimal values (e.g., 0xff0000 for red).
• linewidth: Defines the thickness of the line. Note: Due to limitations in the underlying WebGL implementation on many platforms (especially Windows via ANGLE), the linewidth often defaults to 1 and cannot be changed. For thicker lines, developers typically use Line2 from the Three.js post-processing/addons folder.
• linecap: Defines the appearance of the ends of the line (e.g., ‘butt’, ‘round’, ‘square’).
• linejoin: Defines the appearance of the joints where line segments meet (e.g., ‘round’, ‘bevel’, ‘miter’).

How Three.js Connects Vertices to Draw Lines

To draw a line, Three.js requires three components: a list of coordinates (vertices), a geometry to hold those coordinates, and a material to define the line’s visual properties.

Here is the step-by-step process of how Three.js connects these elements:

1. Defining the Vertices

Vertices are coordinates in 3D space defined by X, Y, and Z axes. You define these points using an array of THREE.Vector3 objects.

const points = [];
points.push(new THREE.Vector3(-10, 0, 0)); // Start point
points.push(new THREE.Vector3(0, 10, 0));  // Middle point
points.push(new THREE.Vector3(10, 0, 0));  // End point

2. Creating the Geometry

Once the points are defined, they are passed into a BufferGeometry. The geometry stores the vertex data and sends it to the GPU.

const geometry = new THREE.BufferGeometry().setFromPoints(points);

3. Applying the Material

Next, you instantiate the LineBasicMaterial to define the line’s color.

const material = new THREE.LineBasicMaterial({ color: 0x0000ff });

4. Choosing the Line Object type

Three.js provides three main object classes to draw lines based on how you want the vertices connected:

• THREE.Line: Connects the vertices sequentially. If you have points A, B, and C, it draws a line from A to B, and B to C.
• THREE.LineLoop: Connects the vertices sequentially and automatically connects the last vertex back to the first vertex (A to B, B to C, and C to A).
• THREE.LineSegments: Connects the vertices in independent pairs. If you have points A, B, C, and D, it draws a line from A to B, and a separate line from C to D.

// Connecting the vertices sequentially
const line = new THREE.Line(geometry, material);

// Add the line to your Three.js scene
scene.add(line);

By combining vertices stored in a BufferGeometry with the styling properties of LineBasicMaterial, Three.js can efficiently draw wireframes, grid helpers, trajectories, and complex vector art directly in the browser.