javascript - Multi-stop Gradient in THREE.js for Lines -

this shows example of how create two-color gradient along three.js line:

color gradient three.js line

how implement multi-stop color gradient along line? looks attributes interpolate across 2 values (i tried passing in three, worked first 2 values).

this do-it-yourself color gradient approach:

create line geometry , add vertices:

var linegeometry = new three.geometry(); linegeometry.vertices.push(      new three.vector3( -10, 0, 0 ),      new three.vector3( -10, 10, 0 )  ); 

use helper functions 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 new buffer geometry geometry, convenience. iterates vertices, assigning each vertex color. color calculated using helper: color.set ( makecolorgradient( i, frequency, phase ) );.

where frequency defines how many color changes want line receive.

and phase shift of color spectrum (= color line start with).

i have added dat.gui can play around parameters. if want change color repetition or type, can alter makecolorgradient function needs. page offers explaination how gradients generated , example based upon: http://krazydad.com/tutorials/makecolors.php.