Javascript 在THREE.js中为线条添加多站渐变

这显示了如何沿THREE.js线创建双色渐变的示例：

---

如何沿直线实现多站颜色渐变？看起来属性只会在两个值之间插值（我尝试传入三个值，它只对前两个值有效）。

这是自己动手的颜色渐变方法：

创建直线几何体并添加一些顶点：

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

为方便起见，请使用一些辅助功能：

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

jsfiddle：

---

解释：

getColoredBufferLine

从几何体创建一个新的缓冲区几何体，这只是为了方便。然后迭代顶点，为每个顶点指定一种颜色。使用另一个辅助对象计算颜色：

color.set（makeColorGradient（i，频率，相位））

其中基本上
frequency
定义您希望线路接收多少颜色变化

而
相位
是光谱的偏移（=线条以什么颜色开始）

我添加了一个dat.gui，这样您就可以使用参数了。如果要更改颜色重复或类型，可以根据需要更改
makeColorGradient
函数。本页很好地解释了渐变是如何生成的，以及我的示例所基于的位置：。
您需要自定义着色器或将线条分割为多个顶点