THREE.BufferGeometry - How do I manually set face colors?

Question

I have a BufferedGeometry for which I would like to set color per face. However, as I understand, the color attribute on the geometry sets color per vertex, not face.

I tried using it anyhow by setting the coloring scheme on the material to be per face, material.vertexColors = THREE.FaceColors; and putting a Float32Array color attribute with 3 items per face (RGB, each ranging from 0 to 1). This did not have the desired output.

Answer 1

You want to assign face colors when using BufferGeometry. To do so, do the following:

Use non-indexed BufferGeometry.

Add a color attribute.

geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

In the color attribute, assign all three vertices of each face to have the same color.

If you are using a three.js built-in material, in the material definition, set

vertexColors: THREE.VertexColors

If you are using ShaderMaterial, then you will have to write the shader yourself.

three.js r.83