我用三个.js创建了一个面积图。每个数据点创建两个三角形，一个从值的底部到下一个值的高度，一个用来填补空白。与gmarland在http://gmarland.github.io/mercer/(这是我在研究这个问题的解决方案时创建的，运气不好…(。
由于不知道有任何选项可以用渐变填充整个区域，我用vertexColors填充了单个三角形。有效，但很明显，低值与高值具有相同的颜色渐变，只是在另一个比例上。创建一个很好的效果，但不可视化实际数据。因此，这是一个挑战，我还想不出一个好的解决方案：
我想用反映值的渐变来填充该区域。也就是说，从0(黄色(到100(蓝色(，如果一个值介于两者之间，它就会停在橙色的某个地方。如果我对三角形使用vertexColors来应用该逻辑，那么单个三角形就会变得可见，因为它们在不同的高度上会有不同的颜色，所以这不是一个选项。
有机会用渐变填充整个网格(所以，图表的区域(吗？
具有该"效果"的二维图表示例：http://users.infragistics.com/2013.2/Ignite/Chart-Gradient.jpg
根据这个声音，我认为你想使用纹理。您可以生成多个THREE.DataTexture，全部为witdh 1和height 100。几个可以通过过滤使事情变得简单。用你的值填充它们，然后用一些逻辑将它们映射到三角形。
按这些图形的最大高度缩放，或者按整个图形缩放(看起来红色代表曲线的峰值，而不是图形的上限(。
这与使用顶点颜色非常相似，但需要生成UV而不是顶点颜色。对于每个顶点，U总是可以为0，V只是顶点的高度，归一化。