Javascript 跨多个面的3.js渐变

我试图在

three.js

中构建一个

HSV圆柱体

，我很难将渐变映射到面。我想我可以这样创建我的对象：

然而，梯度——特别是在向下的红色四边形上——看起来并不平滑。这是有道理的，但我不知道如何修复它

我真的只想创建一个四边形并指定角点顶点颜色，但是

Face4

已经不存在了，所有示例都使用了这个

有没有办法创建穿过矩形面（或面组合）的渐变？我需要如何考虑需要在多个面上运行的渐变？

这里的答案似乎是“更多三角形”