使用Three.js加载HDRI作为环境图失败，求解决方法

核心原因 #

这个错误是因为RGBELoader没有读取到有效的HDR文件内容，绝大多数情况是文件路径配置错误——在Vite/Webpack这类前端构建环境中，直接使用本地绝对路径（比如/Users/.../）会导致浏览器无法正确加载文件。

具体解决方案 #

• 调整文件存放路径
  将HDR文件放到项目的静态资源目录：

  • Vite项目：放到public文件夹下（示例路径：public/hdr/royal_esplanade_1k.hdr）
  • Webpack项目：放到static或public目录下

• 修改加载路径
  改用构建工具支持的相对路径或资源导入方式：

  // 方式1：public目录下的根路径访问（Vite/Webpack通用）
  const hdrPath = '/hdr/royal_esplanade_1k.hdr';
  
  // 方式2：通过import导入（Vite/Webpack支持，推荐）
  import hdrUrl from './assets/hdr/royal_esplanade_1k.hdr';
  

• 验证文件格式与完整性
  用专业工具（如Photoshop、HDRView）重新导出HDR文件为标准RGBE格式，或直接使用Three.js官方示例中的HDR文件测试，排除文件损坏的可能。

• 确认Loader的正确引入与初始化
  确保已正确导入附加模块并初始化PMREMGenerator：

  import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
  import { PMREMGenerator } from 'three/addons/PMREMGenerator.js';
  
  // 初始化PMREMGenerator（需传入renderer实例）
  const pmremGenerator = new PMREMGenerator(renderer);
  pmremGenerator.compileEquirectangularShader();
  

• 配置构建工具处理HDR文件
  如果是Webpack项目，需在配置文件中添加HDR文件的处理规则：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.hdr$/,
          type: 'asset/resource',
          generator: {
            filename: 'hdr/[name][ext]'
          }
        }
      ]
    }
  };
  

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