goal : would like to avoid textures/canvas and directly use vertex colors to get a simple gradient effect on a plane
the code i use is
const width = 1
const height =0.1
const widthSeg = 10
const heightSeg = 1
let planeGeo = new THREE.PlaneBufferGeometry(width, height, widthSeg, heightSeg)
const color = new THREE.Color()
const colors = []
const count = planeGeo.attributes.position.count
for (let index = 0; index < count; index++) {
const t = index / count
color.setHSL(t, 1.0, 0.5);
colors.push(color.r, color.g, color.b);
}
planeGeo.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
const planeMat = new THREE.MeshBasicMaterial({ color: 0xffffff, vertexColors: true })
const gradientPlane= new THREE.Mesh(planeGeo, planeMat)
scene.add(gradientPlane)
the result from this seems incorrect as the planes are using three points to form a face and the transition is messed up.
what is the correct way to parse through the vertices to get a good horizontal gradient ?
fiddle
