根据three.js中的值填充面积图

Question

我用three.js创建了一个面积图。每个数据点创建两个三角形，一个三角形从值的底部到高度再到下一个值高度，一个三角形填补空白。与http://gmarland.github.io/mercer/中gmarland的工作非常相似（我是在研究该问题的解决方案时发现它的，不幸的是...）。

我不知道用梯度整体填充区域的任何选项，我用vertexColors填充了单个三角形。可行，但很明显，低值在另一个刻度上具有与高值相同的颜色渐变。产生不错的效果，但不可视化实际数据。所以这是我还没有想到一个好的解决方案的挑战：

我想用一个反映值的渐变填充区域。即从0（黄色）到100（蓝色），如果介于两者之间，则停在橙色处。 如果我对三角形使用vertexColors来应用该逻辑，则单个三角形将变得可见，因为它们在不同的高度具有不同的颜色，所以这不是一个选择。

有没有机会用渐变填充整个网格（因此，图表的区域）？

具有“效果”的2D图表示例：http://users.infragistics.com/2013.2/Ignite/Chart-Gradient.jpg

Answer 1

通过这种声音，我认为您想使用纹理。您可以生成多个THREE.DataTexture，全部为witdh 1，高度为100。通过过滤可以简化一些操作。用您的值填充它们，然后使用一些逻辑将它们映射到三角形。

通过这些图形的最大高度或整个图形进行缩放（看起来像红色代表曲线的峰值，而不是曲线的上限）。

这与您对顶点颜色执行的操作非常相似，但是您需要生成UV，而不是顶点颜色。对于每个顶点，U始终可以为0，而V只是顶点的高度（已标准化）。