Three.js RGBE Loader 使用 URL

如何解决Three.js RGBE Loader 使用 URL

我想将 HDR 加载到我的场景中，但我没有本地存储的文件，它是一个 URL。似乎 RGBE 加载程序有问题，因为它是错误的文件格式。这是错误消息：THREE.RGBELoader Bad File Format: bad initial token。我想我不能只传递 URL，但我不知道如何处理它。

这是我的加载器的代码：

import { UnsignedByteType,PMREMGenerator } from "three";

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";

export default function initRGBE(renderer,scene,hdr) {
  return new Promise((resolve,reject) => {
    console.log(hdr);
    new RGBELoader().setDataType(UnsignedByteType).load(
      hdr,texture => {
        const pmremGenerator = new PMREMGenerator(renderer);
        pmremGenerator.compileEquirectangularshader();
        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
        scene.environment = envMap;
        texture.dispose();
        pmremGenerator.dispose();
        resolve();
      },xhr => {
        console.log(`HDR ${Math.floor((xhr.loaded / xhr.total) * 100)}% loaded`);
      },err => {
        reject(new Error(err));
      }
    );
  });
}

解决方法

我想通了。我的代码没有问题。问题是我的 Webpack 配置（我使用 Vue）。没有意识到这一点，因为当您不使用本地文件时，webpack 不会抛出错误。这个解决方案是特定于 Vue 的，但我认为你可以把它放在一个普通的 Webpack 配置文件中。

//vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [{ test: /\.hdr$/,use: "url-loader" }]
    }
  }
};