Three.js gradient across multiple faces

Question

I'm trying to build a HSV cylinder in three.js, and I'm having a hard time mapping the gradient to the faces. I thought that I could just create my object like this:

However, the gradients – especially on the red quad going downwards – do not look smooth. It makes sense, but I don't know how to fix it.

I really just want to create a quad and specify the corner vertex colors, but Face4 is gone, and all examples use this.

Is there any way to create a gradient that goes across a rectangular face (or combinations of faces)? How do I need to think about gradients that need to run over multiple faces?

Answer 1

"More triangles" seems to be the answer here.