Three.js环境光线意外效果

在下面的代码中，我渲染了一些立方体并用PointLight和AmbientLight点亮它们。但是，将AmbientLight设置为0xffffff时，无论指定的颜色如何，都会将边的颜色更改为白色。奇怪的是，点灯正在按预期工作。Three.js环境光线意外效果

我该如何让环境光像点光一样运行，因为它不应该洗掉脸上的颜色，只需照亮它们？即因此将环境光设置为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; 
}

来源

2013-02-05 Jodes

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

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

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

更新到three.js所r.84

来源

2013-02-05 21:53:56 WestLangley

Three.js环境光线意外效果

回答

相关问题