Three.js 将渐变应用于缓冲几何体顶点

我有一个动画，它使用

缓冲几何体

创建一个粒子网格，然后使用柏林噪波设置动画。这一切都很完美，但最后要做的是在网格上应用渐变。我已经尝试了我所发现的一切，但没有任何效果。我觉得使用

ShaderMaterial

是最好的/最简单的解决方案，但我发现渐变的代码不起作用，所以我想问，最好的方法是什么，理想情况下是如何实现的示例

这里有一个指向codepen的链接，这样您就可以看到所有代码和示例正在运行。

这是一个我希望网格看起来像什么的例子。

---

我已经放弃了在中创建渐变着色器的尝试，因此欢迎您尝试使用该着色器或提出更好的解决方案。

您的问题是您使用的是uVu.y，但您没有任何uv坐标，因此该值始终为0。
您确定不想使用位置x值吗

gl_FragColor = vec4(mix(color1, color2, smoothstep(-10.0, 10.0, pos.x)), 1.0);

（在下面的代码中使用smoothstep演示，注意将pos变量从顶点发送到片段着色器）

另外，为什么不在着色器中也使用噪波，而不是在JS中

//噪声库
/*
*一种速度改进的perlin和单纯形二维噪声算法。
*
*基于Stefan Gustavson的示例代码(stegu@itn.liu.se).
*彼得·伊斯曼的优化(peastman@drizzle.stanford.edu).
*Stefan Gustavson于2012年提出的更好的排名排序方法。
*由Joseph Winter转换为Javascript。
*
*版本2012-03-09
*
*该代码由其原始作者公开发布，
*斯特凡·古斯塔夫森。你可以用你认为合适的，但是
*感谢归因。
*
*/
（职能（全球）{
var module=global.noise={}；
函数梯度（x，y，z）{
这个.x=x；这个.y=y；这个.z=z；
}
Grad.prototype.dot2=函数（x，y）{
返回这个.x*x+这个.y*y；
};
Grad.prototype.dot3=函数（x，y，z）{
返回这个.x*x+这个.y*y+这个.z*z；
};
var grad3=[新梯度（1,1,0），新梯度（-1,1,0），新梯度（1，-1,0），新梯度（-1，-1,0），
新毕业生（1,0,1）、新毕业生（-1,0,1）、新毕业生（1,0，-1）、新毕业生（-1,0，-1），
新梯度（0,1,1），新梯度（0，-1,1），新梯度（0,1，-1），新梯度（0，-1，-1）]；
var p=[151160137,91,90,15，
131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,
190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,
88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,
77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,
102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,
135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,
5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,
223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,
129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,
251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,
49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,
138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
//要消除索引换行的需要，请将排列表长度加倍
var perm=新数组（512）；
var gradP=新数组（512）；
//这不是一个很好的种子设定功能，但它工作正常。它支持2^16
//不同的种子值。如果你需要更多的种子，写一些更好的。
module.seed=函数（seed）{
如果（种子>0&&种子<1）{
//扩大种子的大小
种子*=65536；
}
种子=数学地板（种子）；
如果（种子<256）{
种子|=种子>8）和255）；
}
perm[i]=perm[i+256]=v；
gradP[i]=gradP[i+256]=grad3[v%12]；
}
};
种子模块（0）；
/*
对于（var i=0；i=y0）{
如果（y0>=z0）{i1=1；j1=0；k1=0；i2=1；j2=1；k2=0；}
如果（x0>=z0）{i1=1；j1=0；k1=0；i2=1；j2=0；k2=1；}
else{i1=0；j1=0；k1=1；i2=1；j2=0；k2=1；}
}否则{
如果（y0如果（T0），有几种设置渐变的方法：