Three.js中HDR环境贴图关闭后无法重新开启的问题求助

问题根因 #

• 变量名拼写错误：updateHdr函数的判断条件写的是不存在的变量params2，实际存储开关状态的对象名是params。未定义的params2和true做相等判断永远返回false，因此控制台始终走false分支日志。
• 纹理变量作用域错误：RGBELoader加载回调中接收的texture是回调内部的局部变量，外层的updateHdr函数无法访问该变量，就算判断逻辑修正，重新开启HDR时也会因为找不到纹理对象赋值失败。
• 切换逻辑不完整：初始加载HDR时同时给scene.background和scene.environment赋值了纹理，但开关逻辑仅处理了scene.environment属性，没有同步切换背景，就算环境贴图恢复，背景也无法正常显示。
• 额外可优化点：初始化时创建的PMREMGenerator未被使用，直接加载的等距柱状HDR纹理经过PMREMGenerator预过滤处理后，PBR材质的环境反射效果会更准确，可避免部分材质反射异常问题。

修复方案 #

1. 提前在外层作用域声明HDR纹理存储变量，保证所有函数可访问，同时补全PMREMGenerator处理逻辑：

// 外层声明纹理变量，不要在加载回调内部声明
let hdrTexture = null;
const envmaploader = new THREE.PMREMGenerator(renderer);
const rgbeLoader = new THREE.RGBELoader();
rgbeLoader.load("myhdr.hdr", function (rawTexture) {
  rawTexture.mapping = THREE.EquirectangularReflectionMapping;
  // 预过滤处理HDR，生成适配PBR渲染的环境贴图
  const envRT = envmaploader.fromEquirectangular(rawTexture);
  hdrTexture = envRT.texture;
  // 释放原始纹理占用的显存
  rawTexture.dispose();
  // 初始状态开关为true，直接赋值
  scene.background = hdrTexture;
  scene.environment = hdrTexture;
})

2. GUI绑定部分不需要改动，注意不要写错参数对象名即可：

const gui = new dat.GUI();
const params = { switch: true }
const lightsFolder = gui.addFolder('Customize lights')
lightsFolder.add(params, "switch").name('hdrenv').onChange(updateHdr)

3. 修正updateHdr函数的判断逻辑，同步切换环境和背景属性：

function updateHdr() {
  if (params.switch === true) {
    scene.environment = hdrTexture;
    scene.background = hdrTexture;
    console.log("hdr enabled");
  } else {
    scene.environment = null;
    // 如果关闭HDR不需要空背景，可以替换为自定义纯色/其他纹理，比如 new THREE.Color(0x222222)
    scene.background = null;
    console.log("hdr disabled");
  }
}

注意：如果你的HDR文件体积较大，也可以选择在开关触发时再加载/卸载纹理，但常规场景下提前加载一次缓存纹理的性能体验更好。

内容的提问来源于stack exchange，提问作者Muteking