Three.js ambient light unexpected effect

问题

In the following code, I render some cubes and light them with a PointLight and AmbientLight. However the AmbientLight when set to 0xffffff changes the colour of the sides to white, no matter their assigned colours. Strangely, the point light is working as expected.

How can I make the ambient light behave like the point light, in that it shouldn't wash out the face colours, simply illuminate them? I.e. so setting ambient light to 0xffffff would be equivalent to having multiple point lights at full intensity around the object.

$(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;
}

回答1:

EDIT - the three.js API has been changed; material.ambient has been deprecated.

---

The solution is to set the intensity of your ambient light to a reasonable value.

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

Updated to three.js r.84

来源：https://stackoverflow.com/questions/14717135/three-js-ambient-light-unexpected-effect