Three.js自定义场景与官方编辑器GLTF模型金属度渲染差异问题

你没有对加载的HDR环境贴图做PMREM预滤波处理，这是导致金属材质过亮的根本原因。
Three.js的PBR材质渲染需要预计算的多级粗糙度环境贴图，才能正确表现不同金属度、粗糙度下的反射效果。官方编辑器加载环境贴图时会自动完成这个预处理流程，当前代码直接把原始HDR等距柱状投影纹理赋值给scene.environment，材质无法采样到对应粗糙度的正确反射值，高金属度区域就会出现过亮的异常表现。
除此之外未显式指定HDR纹理的颜色空间，会进一步加大渲染结果的色彩偏差。

修改HDR资源加载逻辑，新增PMREM预处理步骤，代码参考如下：

// 渲染器配置保持原有设置即可
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;

// 实例化PMREM预处理器，绑定当前渲染器
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

new RGBELoader()
    .load( 'royal_esplanade_1k.hdr', function ( texture ) {
        // 标记HDR原始纹理为线性颜色空间
        texture.encoding = THREE.LinearEncoding;
        texture.mapping = THREE.EquirectangularReflectionMapping;
        // 生成适配PBR材质的预滤波环境贴图
        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
        // 将处理后的贴图赋值给场景环境
        scene.environment = envMap;
        // 释放原始纹理、预处理器占用的显存
        texture.dispose();
        pmremGenerator.dispose();
    } );

// GLB模型加载逻辑无需修改
loader.load(
    './gltf/canette.glb',
    function ( gltf ) {
        obj = gltf.scene;
        mixer = new THREE.AnimationMixer( gltf.scene );
        action = mixer.clipAction( gltf.animations[ 0 ] );
        scene.add( obj );
    }
);

如果调整后仍有细微效果差异，逐一核对以下配置：

• 确认渲染器设置了正确的设备像素比：renderer.setPixelRatio(window.devicePixelRatio)，像素比不匹配会导致反射清晰度偏差
• 确认场景内没有额外添加高强度的直射光源，官方编辑器默认场景仅使用环境贴图提供光照，无额外点光、方向光
• 确认项目使用的Three.js版本与官方编辑器版本一致，跨大版本的PBR渲染参数存在差异，会导致效果不统一

内容的提问来源于stack exchange，提问作者Michaël