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

如何解决在three.js中混合Phong和PBR材料

我有一个应用程序，其中包含使用 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 );
    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,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);
    scene.add(dlight);
    scene.add(dlight.target);

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

    requestAnimationFrame(render);
}

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

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