Three.js中RGBELoader加载4K HDR输出256x256低质量纹理问题求助

API 探路者

2026-9-30

问题原因与修复方案

1. 核心原因

RGBELoader加载的HDR纹理被压缩为256x256，是PMREMGenerator默认输出分辨率限制导致的：默认情况下该工具生成的预滤波环境贴图最大尺寸为256，和输入的HDR文件分辨率无关。

2. 修复步骤

步骤1：调整PMREMGenerator输出分辨率

调用fromEquirectangular时传入第二个参数指定目标分辨率，建议设置为2的幂次，4K源文件设置为1024或2048即可达到清晰效果。

步骤2：补充纹理参数配置

加载完HDR纹理后先配置纹理过滤参数，避免自动压缩。

步骤3：配置渲染器的HDR输出参数

确保渲染器开启了色调映射，才能正确显示HDR纹理的色彩和动态范围。

修正后的参考代码

// 渲染器基础配置（提前配置）
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
renderer.outputEncoding = THREE.sRGBEncoding;

let pmremGenerator = new THREE.PMREMGenerator( renderer )
pmremGenerator.compileEquirectangularShader();

new RGBELoader()
    .setPath( './maps/' )
    .load( 'empty_warehouse_01_4k.hdr', function ( texture ) {
        // 配置原始纹理参数
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        texture.generateMipmaps = false;
        texture.needsUpdate = true;
        
        // 指定输出分辨率为2048，替换原来的无参数调用
        const envMap = pmremGenerator.fromEquirectangular( texture, 2048 ).texture;

        scene.background = envMap;
        scene.environment = envMap;
        
        // 内存清理
        texture.dispose();
        pmremGenerator.dispose();
    })