Unable to Load HDRI image as environment

Questions
, ,
1

Hello everyone,

I’m new to Three and am currently working on a project where I want to use an HDRI file for environment mapping for lighting and reflections purposes. I’ve been trying to load HDRI files using HDRCubeTextureLoader and RGBELoader, but I can’t seem to get it to work. Specifically, I am getting a “bad file format” error in the Chrome console:

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)

The line in question that it’s referencing in main.js is the line with .load(hdrPath, function (texture) { in:

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.log("HDRI environment loaded");
        });
}

I have made sure that the .hdrs in question are valid and have even attempted to replicate loader / texture / hdr using the same HDR to no avail.

I have ensured that the .hdr files are valid and have even attempted to replicate the HDR texture loader example using the same HDR files, but I still encounter the same error.

For additional context, I am using Webpack for my build setup, along with NPX and Vite.

Any guidance on how to resolve this issue would be greatly appreciated.

Thanks in advance!

2

You should check out the source code of this three.js example:

https://threejs.org/examples/webgl_materials_envmaps_hdr

3

@aseyedia maybe try removing the following line

.setDataType(THREE.UnsignedByteType)

or change the type to either THREE.FloatType or THREE.HalfFloatType.

I think that the RGBE Loader defaults to THREE.HalfFloatType if none is specified.

You can also try testing your HDR file first by using my Texture Viewer just to see if it will load properly. This viewer allows local loading by using the Browse input so just load it from your computer.

4

The hdriPath is invalid tho - paths starting with User are filesystem paths, what you need to pass to the .load methods is a web server path.

5

Hello everyone,

thank you for your kind and helpful responses. I was able to get it to work by addressing the .setDataType(THREE.UnsignedByteType) issue and resolving the hdriPath. Thank you to @GitHubDragonFly and @mjurczyk.