I'm currently struggling with creating an HSV cylinder using three.js. I am facing difficulties in properly mapping the gradient to the faces of the cylinder. Initially, I attempted to create my object in this manner:
https://i.sstatic.net/WboAE.png
Unfortunately, the gradients on the faces, particularly the red quad moving downwards, appear jagged and not smooth. This issue is causing me confusion as I try to find a solution.
https://i.sstatic.net/KJSLq.png
My primary goal is to generate a quad and define the vertex colors at each corner. However, I discovered that Face4
is no longer supported, and existing examples rely heavily on it.
Is there a technique available for creating a gradient that spans a rectangular face (or combinations of faces)? How should I approach implementing gradients that traverse multiple faces?