设置面部颜色的Three.js会禁用阴影

Question

我在几何面上设置了一个随机颜色：

//  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);
        }
    }
}

一切运作良好但新对象不会受到影响。在不修改面部颜色的情况下，对象会投射并接收阴影。

如何添加脸部颜色并且仍然有阴影？

Answer 1

编辑：我试图重现你的问题，但对我来说它的工作原理（Chrome 35＆amp; Firefox 25，threejs r67）。设置面部颜色的代码与您的颜色完全相同。

    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;

---

为此做一个小提琴真是太棒了，但只要查看你的代码，你就可以告诉材料它需要更新。

  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;     

  }

希望这对你有所帮助。