问题描述
我想将 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" }]
}
}
};