三.js环境光意外效果答案

【问题标题】：Three.js ambient light unexpected effect三.js环境光意外效果
【发布时间】：2017-03-28 00:47:34
【问题描述】：

在以下代码中，我渲染了一些立方体并使用 PointLight 和 AmbientLight 照亮它们。然而，当设置为 0xffffff 时，AmbientLight 会将两侧的颜色更改为白色，无论它们分配的颜色如何。奇怪的是，点光源按预期工作。

我怎样才能使环境光表现得像点光一样，因为它不应该洗掉面部颜色，而只是照亮它们？ IE。因此将环境光设置为 0xffffff 就相当于在对象周围有多个全强度点光源。

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

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

编辑 - three.js API 已更改； material.ambient 已被弃用。

解决方案是将环境光的强度设置为合理的值。

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

更新到three.js r.84

【讨论】：