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

EDIT - 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 주변 조명 예상치 못한 효과

답변

관련 문제