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

EDIT: Я попытался воспроизвести вашу проблему, но для меня это работает как предполагалось (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;  

    } 

Надеюсь, это поможет вам немного.