Javascript Question posted in
A very good W3school tutorial can be found here.

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

Tags:

2

Answers


  1. 0

    The error you are encountering right now (THREE.RGBELoader: Bad File Format: bad initial token) usually indicates that there is an issue with how the HDRI file is being read.

    would suggest you should check whether build tools are configured to handle HDR files correctly.

    OR you can try adding logging to debug it .

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search