Efekt niespodziewanego efektu światła Three.js

Question

W poniższym kodzie renderuję niektóre kostki i rozpalam je za pomocą PointLight i AmbientLight. Jednak AmbientLight po ustawieniu na 0xffffff zmienia kolor boków na biały, bez względu na przypisane im kolory. O dziwo, światło punktowe działa zgodnie z oczekiwaniami.

Jak mogę sprawić, aby światło otoczenia zachowywało się jak światło punktowe, ponieważ nie powinno ono wypłukiwać kolorów twarzy, po prostu je oświetlać? To znaczy. więc ustawienie światła otoczenia na 0xffffff byłoby równoznaczne z wieloma światłami punktowymi o pełnej intensywności wokół obiektu.

$(function(){ 
    var camera, scene, renderer; 
    var airplane; 
    var fuselage; 
    var tail; 
    init(); 
    animate(); 

    function init() { 
     scene = new THREE.Scene(); 
     camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.1, 10000); 
     camera.position.z = 2; 

     airplane = new THREE.Object3D(); 
     fuselage = newCube(
       {x: 1, y: 0.1, z: 0.1}, 
       {x: 0, y: 0, z: 0}, 
       [0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080], 
       [0, 1, 2, 3, 4, 5] 
     ); 
     airplane.add(fuselage); 
     tail = newCube(
       {x: 0.15, y: 0.2, z: 0.05}, 
       {x: 0.5, y: 0.199, z: 0}, 
       [0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080], 
       [0, 1, 2, 3, 4, 5] 
     ); 
     airplane.add(tail); 
     scene.add(airplane); 

     var ambientLight = new THREE.AmbientLight(0xffffff); 
     scene.add(ambientLight);   

     var pointLight = new THREE.PointLight(0x888888); 
     pointLight.position.x = 100; 
     pointLight.position.y = 100; 
     pointLight.position.z = 100; 
     scene.add(pointLight);  

     renderer = new THREE.WebGLRenderer(); 
     renderer.setClearColorHex(0x000000, 1); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 
    } 

    function animate() { 
     requestAnimationFrame(animate); 
     render(); 
    } 
    function render() { 
     airplane.rotation.x += 0.005; 
     airplane.rotation.y += 0.01; 
     renderer.render(scene, camera); 
    } 
}); 

function newCube(dims, pos, cols, colAss){ 
    var mesh; 
    var geometry; 
    var materials = []; 
    geometry = new THREE.CubeGeometry(dims.x, dims.y, dims.z); 
    for (var i in cols){ 
     materials[i] = new THREE.MeshLambertMaterial({ color: cols[i], overdraw: true }); 
    } 
    geometry.materials = materials; 
    for (var i in colAss){ 
     geometry.faces[i].materialIndex = colAss[i]; 
    } 
    mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
    mesh.position = pos; 
    return mesh; 
} 

Answer 1

EDYCJA - interfejs API three.js został zmieniony; material.ambient jest przestarzałe.

---

Rozwiązaniem jest ustawienie intensywności światła otoczenia na rozsądną wartość.

var ambientLight = new THREE.AmbientLight(0xffffff, 0.2); 

Aktualizacja do three.js r.84