Блог

У меня есть приложение, которое включает в себя сетки, отрисованные с помощью MeshPhongMaterials. Они хорошо работают с полным набором светильников, доступных в three.js .

Тем не менее, я хочу объединить их с импортированными моделями GLB / GLTF. Я полагаю, что для того, чтобы модели были освещены, я должен использовать карту окружения, например, следующую:

 function _Environment() {
    const env_scene = new THREE.Scene();
    const roomMaterial = new THREE.MeshStandardMaterial( { side: THREE.BackSide } );
    const room = new THREE.Mesh( new THREE.BoxGeometry(), roomMaterial );
    room.position.set( 0, 0, 0 );
    room.scale.set( 40, 40, 40 );
    env_scene.add( room );
    const env_alight = new THREE.AmbientLight(0xFFFFFF, .1);
    env_scene.add(env_alight);
    return env_scene;
   }

function main() {
    canvas = document.getElementById('c');
    renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.outputEncoding = THREE.sRGBEncoding;
    
    const aspect = 4/3;  // the canvas default
    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(5, 0, 2);
    camera.up.set(0,1,0);
    camera.lookAt(new THREE.Vector3());
    camera.updateProjectionMatrix()

    const environment = new _Environment();
    const pmremGenerator = new THREE.PMREMGenerator(renderer);
    scene = new THREE.Scene();
    scene.background = new THREE.Color(DefaultBackgroundColor);
    scene.environment = pmremGenerator.fromScene(environment).texture;
    dlight = new THREE.DirectionalLight(0xFFFFFF, .7);
    dlight.position.set(5, 5, 10);
    dlight.target.position.set(0, 0, 0);
    scene.add(dlight);
    scene.add(dlight.target);

    alight = new THREE.AmbientLight(0xFFFFFF, .3);
    scene.add(alight);

    requestAnimationFrame(render);
}
 

Однако, похоже, что карта окружающей среды приводит к тому, что материалы Фонга выглядят насыщенными, и я не могу найти хорошую комбинацию источников света, которые работают.

Всегда можно преобразовать все в PBR, но я что-то упускаю? Могут ли Фонг и PBR сосуществовать в хорошо освещенной, естественной сцене?