Vertex Colors in THREE.Line

Question

I'm trying to draw a line in Three.js with different colors for different vertices, using THREE.Line and THREE.LineBasicMaterial, with vertexColors set to THREE.VertexColors. I would prefer that there is no interpolation between the colors of adjacent vertices (such that the color just changes discontinuously at the halfway point between two vertices).

I tried setting shading: THREE.FlatShading on the material, but I realize now that that's not an option for LineBasicMaterial: http://jsfiddle.net/214huf0a/

Is there a built-in (or easy) way to prevent smoothing of color between points on a line in Three.js, or do I need to write my own shader?

Answer 1

You can create a line in three.js having one color on each segment by using the THREE.LineSegments and setting vertexColors = THREE.VertexColors;

for ( var i = 0; i < geometry.vertices.length; i+=2 ) {
    geometry.colors[ i ] = new THREE.Color( Math.random(), Math.random(), Math.random() );
    geometry.colors[ i + 1 ] = geometry.colors[ i ];
}

var material = new THREE.LineBasicMaterial( {
    color: 0xffffff,
    vertexColors: THREE.VertexColors
} );

var line = new THREE.LineSegments( geometry, material );

three.js r.85