THREE.RGBELoader Bad File Format: bad initial token || loading Hdri image to my three.js viewer getting this error

trying to add HDRI in my configurator but not able to load ended with error.

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { PMREMGenerator } from 'three/src/extras/PMREMGenerator.js';
const pmremGenerator = new PMREMGenerator( renderer );
pmremGenerator.compileEquirectangularShader();

const rgbeLoader = new RGBELoader();
rgbeLoader.load('./src/images/hdri/neutral.hdr', (texture) => {
    const envMap = pmremGenerator.fromEquirectangular(texture).texture;
    scene.environment = envMap;

    // Apply Tone Mapping for HDRI
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.0; // Adjust as needed

    texture.dispose();
    pmremGenerator.dispose();
    log('HDRI loaded successfully');
}, undefined, (error) => {
    log(`HDRI loading error: ${error.message}`, 'error');
    console.error('An error occurred while loading the HDRI texture:', error);
});

adding error message
THREE.RGBELoader Bad File Format: bad initial token

Upvotes: 0

Views: 88

Answers (1)

drukaman
drukaman

Reputation: 372

  1. Is this in production or dev environment? I had a similar problem in dev env with that before, and then I moved the files for the textures to a public folder and that solved the issue. It was all about file access and permissions.

  2. If that is not it, then it's a problem with your file. Try using a tool to verify and format your file again for that specific environment. like for example, https://gainmap-creator.monogrid.com/

Upvotes: 0

Related Questions