Question

I am creating a custom geometry by building custom located faces. I am using the MeshNormalMaterial for material and I want to define the color for the faces independently one to each other. However, no matter what colors I set, I still get the same looking result.

My code below:

var geometry = new THREE.Geometry();
for (var i = 0; i < length - 1; i++) {
  for (var j = 0; j < length - 1; j++) {
    geometry.vertices.push(new THREE.Vector3(x[i][j], y[i][j], z[i][j]));
    geometry.vertices.push(new THREE.Vector3(x[i + 1][j], y[i + 1][j], z[i + 1][j]));
    geometry.vertices.push(new THREE.Vector3(x[i + 1][j + 1], y[i + 1][j + 1], z[i + 1][j + 1]));
    geometry.vertices.push(new THREE.Vector3(x[i][j + 1], y[i][j + 1], z[i][j + 1]));
    var face = new THREE.Face4(index, index + 1, index + 2, index + 3);
    face.color.setHex(color);
    geometry.faces.push(face);
    index += 4;
  }
}

geometry.computeFaceNormals();
var object = new THREE.Mesh(geometry, new MeshNormalMaterial());
parent.add(object);

What should I change to the above code such as I can set the face colors and have them actually display the colors I set?

Answer 1

AFAIK MeshNormalMaterial will always give you the same colors.

Try this:

new MeshBasicMaterial({ vertexColors : THREE.VertexColors })