Three.js环境光意想不到的效果 [英] Three.js ambient light unexpected effect

问题描述

在下面的代码中，我渲染一些立方体并使用PointLight和AmbientLight点亮它们。但是，当设置为0xffffff时，AmbientLight会将边的颜色更改为白色，无论它们指定的颜色如何。奇怪的是，点光源正如预期的那样工作。

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.

如何使环境光的行为像点光一样，因为它不应该洗掉面部颜色，只是点亮它们？即因此，将环境光设置为0xffffff相当于在对象周围具有全强度的多个点光源。

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

推荐答案

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

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

更新为three.js r.84

Updated to three.js r.84

这篇关于Three.js环境光意想不到的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！