Three.js setting face color disables the shadow

Question

I am setting a random color on geometry faces:

//  Material used to create the mesh
var material = new THREE.MeshLambertMaterial({ color: 0xffffff, ambient: 0xffffff, vertexColors: THREE.FaceColors})

function addColor(geometry) {

    var i = 0,
        il = geometry.faces.length,
        color,
        r, g, b, f, fl;

    for (; i < il; i += 12) {

        r = Math.random(),
        g = Math.random(),
        b = Math.random();

        f = 0,
        fl = 12;

        for (; f < fl; f += 1) {
            geometry.faces[i + f].color.setRGB(r, g, b);
        }
    }
}

Everything works well but the new object do not receive shadow. Without modifying the face color the object casts and receives shadow.

What should I do to add a face color and still have shadows?

Answer 1

EDIT: I tried to reproduce your problem but for me it works as supposed (Chrome 35 & Firefox 25, threejs r67 ). The code that sets the face color, is exactly the same as yours.

    var material = new THREE.MeshLambertMaterial({
      vertexColors: THREE.FaceColors
    });

    for( var i = 0; i < 3; i++){

      var cube = new THREE.Mesh(new THREE.BoxGeometry(200,200,200),material);

      cube.position = new THREE.Vector3(0, 0, -300 * (i - 1)  );
      cube.castShadow = true;
      cube.receiveShadow = true;

      var geo = cube.geometry;

      for(var j = 0, k = geo.faces.length; j < k; j++){

        var r = Math.random(),
            g = Math.random(),
            b = Math.random();

        geo.faces[j].color.setRGB(r,g,b);
      }

      scene.add(cube);

    }

    ...

    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
        directionalLight.position.set( 0, 500, 500 );

    directionalLight.castShadow = true;

    scene.add(directionalLight);

    ...

    renderer.shadowMapEnabled = true;
    renderer.shadowMapType = THREE.PCFSoftShadowMap;

---

It would be awesome to have a fiddle for this, but just by looking at your code you may want to tell the material that it needs an update.

  var material = new THREE.MeshLambertMaterial({ color: 0xffffff, ambient: 0xffffff, vertexColors: THREE.FaceColors})
  function addColor(geometry) {

    var i = 0,
        il = geometry.faces.length,
        color, r, g, b, f, fl;

    for (; i < il; i += 12) {
      ...
    }

    material.needsUpdate = true;     

  }

Hope this helps you a bit.