A colorful stroked triangle

It’s not hard to go from a yellow stroked triangle to a colorful one in which each vertex is assigned its own color.

A colorful 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 red = new THREE.Color(1, 0, 0);
    let green = new THREE.Color(0, 1, 0);
    let blue = new THREE.Color(0, 0, 1);
    geom.colors.push(red, green, blue, red);
    let args = {vertexColors: true, linewidth: 4};
    let mat = new THREE.LineBasicMaterial(args);
    let line = new THREE.Line(geom, mat, THREE.LineStrip);
    return line;
}

We used the same idea in developing our colorful filled square: we push the colors onto the geometry’s colors array, one per vertex, and we tell the material that each vertex gets its own color (the vertexColors argument with which the material gets created). It doesn’t take much more to build a colorful stroked square or, for that matter, any sort of colorful polyline in space.