Multi-stop Gradient in THREE.js for Lines

Question

This shows an example of how to create a two-color gradient along a THREE.js line:

Color Gradient for Three.js line

How do you implement a multi-stop color gradient along a line? It looks like attributes will only interpolate across two values (I tried passing in three, it only worked with the first two values).

Answer 1

This is the do-it-yourself color gradient approach:

Create a line geometry and add some vertices:

var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push( 
    new THREE.Vector3( -10, 0, 0 ), 
    new THREE.Vector3( -10, 10, 0 ) 
);

Use some helper functions for convenience:

var steps = 0.2;
var phase = 1.5;
var coloredLine = getColoredBufferLine( steps, phase, lineGeometry );
scene.add( coloredLine );

jsfiddle: http://jsfiddle.net/L0rdzbej/276/

---

Explaination:

getColoredBufferLine creates a new buffer geometry from the geometry, which is just for convenience. It then iterates the vertices, assigning each vertex a color. The color is calculated using another helper: color.set ( makeColorGradient( i, frequency, phase ) );.

Where basically frequency defines how many color changes you want the line to receive.

And phase is a shift of the color spectrum (= what color does the line start with).

I have added a dat.gui so you can play around with the parameters. If you want to change the color repetition or type, you can alter the makeColorGradient function to your needs. This page offers some good explaination how gradients are generated and where my example is based upon: http://krazydad.com/tutorials/makecolors.php.