THREE.js中的多点渐变线 [英] Multi-stop Gradient in THREE.js for Lines

问题描述

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

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

Three.js行的颜色渐变

如何沿着一条线实施多级色彩渐变?看来属性只会在两个值之间插值(我尝试传递三个，它仅适用于前两个值).

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).

推荐答案

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

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/jfd58hbm/

jsfiddle: http://jsfiddle.net/jfd58hbm/

---

说明:

getColoredBufferLine从该几何图形创建一个新的缓冲区几何图形，这只是为了方便起见.然后，它会迭代顶点，为每个顶点分配一种颜色.颜色是使用另一个辅助函数color.set ( makeColorGradient( i, frequency, phase ) );计算的.

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 ) );.

frequency基本上定义了您希望线条接收多少种颜色变化.

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

phase是色谱的偏移(=线以哪种颜色开始.)

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

我添加了dat.gui，因此您可以使用这些参数.如果要更改颜色重复或类型，可以根据需要更改makeColorGradient功能.该页面提供了一些很好的解释，说明了如何生成渐变以及我的示例基于以下内容: http://krazydad. com/tutorials/makecolors.php .

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.

这篇关于THREE.js中的多点渐变线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！