开发glTF场景编辑器时，如何通过JS文件输入加载HDR图像？

DevOps 小满

2026-8-9

解决HDR环境贴图在网页文件输入中的加载问题

问题根源

浏览器没有内置HDR（Radiance格式）的MIME类型映射，因此File.type属性会返回空值；同时HTML的<img>标签默认不支持HDR格式的解码，直接用URL.createObjectURL(file)赋值给图片src会加载失败。

解决步骤

1. 手动识别HDR文件

放弃依赖File.type，通过文件名后缀判断是否为HDR文件：

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const isHDR = file.name.toLowerCase().endsWith('.hdr');
  isHDR ? handleHDRFile(file) : handleNormalImage(file);
});

2. 使用3D库解析HDR数据

由于普通图片标签无法解码HDR，结合你开发glTF编辑器的场景，推荐用Three.js这类3D库的专用加载器处理HDR文件（比如RGBELoader）：

import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';

function handleHDRFile(file) {
  const loader = new RGBELoader();
  loader.load(file, (texture) => {
    // 将HDR纹理设为环境贴图
    texture.mapping = THREE.EquirectangularReflectionMapping;
    // 此处添加场景中应用纹理的逻辑
    scene.environment = texture;
  }, undefined, (err) => {
    console.error('HDR加载失败:', err);
  });
}

// 处理普通图片的逻辑（原有的jpg/png加载逻辑）
function handleNormalImage(file) {
  const img = new Image();
  img.src = URL.createObjectURL(file);
  img.onload = () => {
    // 处理普通图片
    URL.revokeObjectURL(img.src);
  };
}

如果不使用Three.js，也可以手动读取文件的ArrayBuffer后自行解析Radiance HDR格式，但实现成本较高，建议使用成熟的第三方库。