Three.js加载HDRI报错：THREE.RGBELoader Bad File Format: bad initial token

问题分析 #

这个报错说明你加载的HDR文件不符合RGBELoader要求的标准RGBE格式，或者文件路径、服务器配置存在问题，导致Loader无法正确解析文件内容。

解决方法 #

• 验证HDR文件有效性
  确认neutral.hdr是正经的RGBE格式HDR文件，不是把JPG/PNG改后缀伪装的。用HDRView、Photoshop这类工具打开文件，能正常显示才说明文件没问题；如果打不开，重新下载或导出正确的RGBE编码HDR文件。

• 检查文件路径
  核对./src/images/hdri/neutral.hdr路径是否正确：

  • 开发环境里，相对路径的基准是当前JS文件所在位置，或者HTML文件的位置，别搞混了。
  • 打开浏览器控制台的Network面板，看这个HDR文件的请求状态，404就是路径写错了，改成正确的相对/绝对路径试试。

• 检查服务器响应头
  服务器返回HDR文件时，Content-Type要设置正确（比如image/vnd.radiance或application/octet-stream）。如果返回的是text/plain这类格式，会导致Loader解析失败。在Network面板的Response Headers里查看Content-Type，有问题就调整服务器配置。

• 适配Three.js版本调整代码
  如果你用的是新版Three.js（r158及以后），PMREMGenerator已经被移除了，直接简化代码即可：

  rgbeLoader.load('./src/images/hdri/neutral.hdr', (texture) => {
      texture.mapping = THREE.EquirectangularReflectionMapping;
      scene.environment = texture;
  
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      renderer.toneMappingExposure = 1.0;
  
      log('HDRI加载成功');
  }, undefined, (error) => {
      log(`HDRI加载错误: ${error.message}`, 'error');
      console.error('加载HDRI纹理时出错:', error);
  });
  

  另外注意导入路径，新版RGBELoader的路径是three/addons/loaders/RGBELoader.js，如果是旧版Three.js，要对应好导入路径。

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