javascript - THREE.js 中的多站渐变线

Question

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

Color Gradient for Three.js line

如何沿一条线实现多点颜色渐变？看起来属性只会插入两个值(我尝试传递三个值，它只适用于前两个值)。

Answer 1

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

创建一个直线几何图形并添加一些顶点:

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:http://jsfiddle.net/jfd58hbm/

---

解释:

getColoredBufferLine 从geometry创建一个新的buffer geometry，这只是为了方便。然后迭代顶点，为每个顶点分配一种颜色。使用另一个助手计算颜色:color.set ( makeColorGradient( i, frequency, phase ) );。

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

phase 是色谱的偏移(= 线条以什么颜色开始)。

我添加了一个 dat.gui 以便您可以使用参数。如果您想更改颜色重复或类型，您可以根据需要更改 makeColorGradient 函数。此页面提供了一些很好的解释如何生成渐变以及我的示例基于的位置:http://krazydad.com/tutorials/makecolors.php .