在threejs中调整每个顶点的线条颜色

Question

I have a line which passes through points of a particle cloud in threejs. I am using a canvas renderer. I would like to vary the color of the line randomly from vertex to vertex. I saw this example:

http://mrdoob.github.io/three.js/examples/webgl_custom_attributes_lines.html

But unfortunately after a few hours of trying to adapt it to my (much simpler) scenario, I have been unable to extract the portion I need to adjust just the colors of a line. Does anyone have a simpler explanation for how to go about this? ThreeJS documentation for vertexMaterial is blank, and for lines it only talks about how to adjust the color of the line as a whole (line.material.color).

This is my code currently:

line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: lineColor, opacity: lineVars.lineOpacity } ) );

Thanks for any help you can provide.

Answer 1

(Example of below function: http://webblocks.nl/tests/three/waves.html )

This is how I ued to make axes lines in 3 colors:

THREE.Scene.prototype.makeAxes = function(length) {
    length || (length = 5000);

    function v(x,y,z) {
        return new THREE.Vector3(x,y,z);
    }

    var colors = [0xFF0000, 0x00FF00, 0x0000FF]
    for ( var axis=0; axis<3; axis++ ) {
        var lineGeo = new THREE.Geometry();
        var from = [0, 0, 0], to = [0, 0, 0];
        from[axis] = -length;
        to[axis] = length;
        lineGeo.vertices.push(v.apply(null, from), v.apply(null, to));
        var lineMat = new THREE.LineBasicMaterial({
            color: colors[axis],
            lineWidth: 1
        });
        var line = new THREE.Line(lineGeo, lineMat);
        line.type = THREE.Lines;
        this.add(line);
    }
};

Or simpler:

• create material with color
  var lineMat = new THREE.LineBasicMaterial({color: 0xFF0000, lineWidth: 1});
• create line with material
  var line = new THREE.Line(lineGeo, lineMat);
• add line to scene