Displaying Solid Colors on Faces in Three.js

To display faces with distinct, solid colors rather than gradients in Three.js, you need to modify how the geometry and material are set up. The interpolation you're seeing is the default behavior when using vertex colors.

Here are two approaches to achieve solid-colored faces:

Option 1: Use FlatShading

You can use FlatShading to achieve solid colors per face:

JAVASCRIPTCopied
const material = new THREE.MeshBasicMaterial({
  vertexColors: true,
  flatShading: true
});

Option 2: Create Separate Faces

For complete control, you can create separate faces with the same color for all vertices of each face:

JAVASCRIPTCopied
// Create geometry
const geometry = new THREE.BufferGeometry();

// Define vertices and faces
const vertices = [...]; // Your vertices array
const indices = [...];  // Your face indices

// Create a color array where each face has the same color for all its vertices
const colors = [];
for (let i = 0; i < indices.length / 3; i++) {
  // Generate a color for this face
  const color = new THREE.Color(Math.random(), Math.random(), Math.random());
  
  // Apply the same color to all three vertices of this face
  for (let j = 0; j < 3; j++) {
    colors.push(color.r, color.g, color.b);
  }
}

// Set attributes
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
geometry.setIndex(indices);

// Create material with vertex colors
const material = new THREE.MeshBasicMaterial({ vertexColors: true });

// Create mesh
const mesh = new THREE.Mesh(geometry, material);

This approach ensures each face has a solid color by assigning the same color to all vertices of a face.