Materials you can use for a line geometry

The last couple of materials we're going to look at can only be used on one specific geometry: THREE.Line. As the name implies, this is just a single line that only consists of vertices and doesn't contain any faces. Three.js provides two different materials you can use on a line, which are as follows:

  • THREE.LineBasicMaterial: The basic material for a line allows you to set the colors, linewidth, linecap, and linejoin properties
  • THREE.LineDashedMaterial: This has the same properties as THREE.LineBasicMaterial but allows you to create a dash effect by specifying dash and spacing sizes

We'll start with the basic variant and after that look at the dashed variant.

THREE.LineBasicMaterial

The materials available ...

Get Learning Three.js – the JavaScript 3D Library for WebGL - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial