The triangles we created before are called filled triangles. Here we produce a stroked triangle defined only by its outline but not its interior.

A stroked triangle

Here is the code:

function makeTriangle() {
    let geom = new THREE.Geometry();
    let a = new THREE.Vector3(0, 0, 0);
    let b = new THREE.Vector3(4, 0, 0);
    let c = new THREE.Vector3(0, 8, 0);
    geom.vertices.push(a, b, c, a);
    let args = {color: 0xffff00, linewidth: 4};
    let mat = new THREE.LineBasicMaterial(args);
    let line = new THREE.Line(geom, mat, THREE.LineStrip);
    return line;
}

Since the triangle outline is a closed loop, we push the first vertex (a) and the last vertex are the same, so we push a both first and last onto the geometry’s vertices array.

We build the ‘mesh’ that combines geometry and material using THREE.Line. The third argument, THREE.LineStrip, says to combine the vertices one after another to form a single strip called a polyline. This yields the vertex sequence a, b, c, a as desired.