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＆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;     

  }

希望這對您有所幫助。