Unable to Load HDRI image as environment with Three.js

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 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!

Solution

First of all, you need to import this loader, in your code I don’t see this, but you mentioned that you start with Three.js, so let we be clear with that.

import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';

If error still exists, check your webpack.config.js

module.exports = {
   // …
    module: {
        rules: [
            {
                test: /\.(hdr)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'assets/hdr/[name].[ext]',
                        },
                    },
                ],
            },
        ],
    },
};

Check also vite.config.js

export default defineConfig({
    plugins: [
        staticCopy({
            targets: [
                {
                    src: 'src/assets/hdr/*.hdr',
                    dest: 'assets/hdr'
                }
            ]
        })
    ]
});

Very often issues with loading assets exist because path in some way is wrong. Make sure that file is set according to path. This path looks suspicious a little bit…

'/Users/.../ocean_hdri/royal_esplanade_1k.hdr'

Try maybe put hdr file to public folder.