Невозможно загрузить изображение HDRI в качестве среды с помощью Three.js
Я новичок в Three и в настоящее время работаю над проектом, в котором хочу использовать файл HDRI для картирования среды с целью освещения и отражений. Я пытался загрузить файлы HDRI, используя HDRCubeTextureLoader и RGBELoader, но, похоже, у меня не получается. В частности, я получаю сообщение об ошибке «неправильный формат файла» в консоли Chrome:
main.js:214 Error: THREE.RGBELoader: Bad File Format: bad initial token
at rgbe_error (RGBELoader.js:39:36)
at RGBE_ReadHeader (RGBELoader.js:139:6)
at RGBELoader.parse (RGBELoader.js:354:28)
at Object.onLoad (three.module.js:44430:21)
Строка, о которой идет речь в main.js, является строкой с .load(hdrPath, function (texture) { в:
const hdrPath = '/Users/.../ocean_hdri/royal_esplanade_1k.hdr';
...
function loadHDRI() {
new RGBELoader()
.setDataType(THREE.UnsignedByteType)
.load(hdrPath, function (texture) {
const hdrRenderTarget = pmremGenerator.fromEquirectangular(texture);
scene.environment = hdrRenderTarget.texture;
scene.background = hdrRenderTarget.texture;
textMeshes.forEach(mesh => {
mesh.material.envMap = hdrRenderTarget.texture;
mesh.material.needsUpdate = true;
});
texture.dispose();
pmremGenerator.dispose();
console.info("HDRI environment loaded");
});
}
Я убедился, что файлы .hdr действительны, и даже попытался воспроизвести пример загрузчика текстур HDR, используя те же файлы HDR, но все равно сталкиваюсь с той же ошибкой.
Для дополнительного контекста я использую Webpack для настройки сборки вместе с NPX и Vite.
Будем очень признательны за любые рекомендации по решению этой проблемы.
Заранее спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ошибка, с которой вы столкнулись прямо сейчас (THREE.RGBELoader: неправильный формат файла: неверный начальный токен), обычно указывает на проблему с чтением файла HDRI.
предлагаю вам проверить, настроены ли инструменты сборки для правильной обработки файлов HDR.
ИЛИ вы можете попробовать добавить ведение журнала для его отладки.
Прежде всего, вам нужно импортировать этот загрузчик, в вашем коде я этого не вижу, но вы упомянули, что начинаете с Three.js, так что давайте внесем ясность.
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
Если ошибка все еще существует, проверьте свой webpack.config.js
module.exports = {
// …
module: {
rules: [
{
test: /\.(hdr)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/hdr/[name].[ext]',
},
},
],
},
],
},
};
Проверьте также vite.config.js
export default defineConfig({
plugins: [
staticCopy({
targets: [
{
src: 'src/assets/hdr/*.hdr',
dest: 'assets/hdr'
}
]
})
]
});
Очень часто проблемы с загрузкой ресурсов возникают из-за того, что путь каким-то образом неправильный. Убедитесь, что файл установлен в соответствии с путем. Этот путь выглядит немного подозрительно…
'/Users/.../ocean_hdri/royal_esplanade_1k.hdr'
Попробуйте поместить hdr-файл в папку public.
@CelineDion Я рад этому, был бы очень признателен, если бы получил оценку этого поста. Спасибо.
Благодаря вашему совету и повторному посещению этого поста он наконец начал работать. Спасибо.