Question

我有一个应用程序，其中包含使用 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);
}

但是，环境贴图似乎导致 Phong 材质显示为饱和，我找不到合适的灯光组合。

人们总是可以将所有内容转换为 PBR，但我是否遗漏了什么？ Phong 和 PBR 能否在光线充足、外观自然的场景中共存？

在three.js中混合Phong和PBR材料

0 个答案: