Having trouble loading HDRI image as environment using Three.js

Question

Having trouble loading HDRI image as environment using Three.js

I recently started using Three.js and am currently tackling a project that involves utilizing an HDRI file for environmental mapping for lighting and reflection purposes. I've been experimenting with loading HDRI files using the HDRCubeTextureLoader and RGBELoader, but unfortunately, I have been encountering difficulties. Specifically, I keep 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 error points to the line in main.js where

.load(hdrPath, function (texture) {

is located:

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 double-checked that the .hdr files are valid and even tried replicating the HDR texture loader example using the same HDR files, but the error persists.

Just to provide more context, I am using Webpack for my build setup, alongside NPX and Vite.

I would greatly appreciate any suggestions or guidance on how to resolve this issue.

Thank you in advance!

javascript three.js

Answer 1

Answer №1

Before proceeding, ensure that you have imported the necessary loader in your code. If it's missing, you can add it by following this import statement, especially if you are working with Three.js.

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

If the error persists, double-check your webpack.config.js for any potential issues.

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

Similarly, review your vite.config.js to ensure proper configuration.

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

Many asset loading issues stem from incorrect file paths. Verify that the file path is accurately referenced. The provided path seems a bit suspicious...

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

If needed, consider moving the HDR file to the public folder for better accessibility.

Answer 2

Before proceeding, ensure that you have imported the necessary loader in your code. If it's missing, you can add it by following this import statement, especially if you are working with Three.js.

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

If the error persists, double-check your webpack.config.js for any potential issues.

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

Similarly, review your vite.config.js to ensure proper configuration.

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

Many asset loading issues stem from incorrect file paths. Verify that the file path is accurately referenced. The provided path seems a bit suspicious...

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

If needed, consider moving the HDR file to the public folder for better accessibility.

Answer 3

Answer №2

If you are seeing the current error message (THREE.RGBELoader: Bad File Format: bad initial token), it typically means that the HDRI file is not being read correctly.

I recommend verifying that your build tools are set up to handle HDR files properly.

Alternatively, you could attempt to troubleshoot by adding logging for debugging purposes.

Answer 4

If you are seeing the current error message (THREE.RGBELoader: Bad File Format: bad initial token), it typically means that the HDRI file is not being read correctly.

I recommend verifying that your build tools are set up to handle HDR files properly.

Alternatively, you could attempt to troubleshoot by adding logging for debugging purposes.

Having trouble loading HDRI image as environment using Three.js

Answer №1

Answer №2

Similar questions

What is causing my Vue leave transition to malfunction?

I want the name to be retained in storage to prevent the item from being mistakenly renamed when deleted based on its index

Is there a way to extract data from the Redux state in a React component?

Improprove the Express Router in a Node.js application

The failure of numerous asynchronous calls in the JavaScript Facebook API is causing issues

Understanding JavaScript Regular Expressions

Error: Could not locate local grunt on Windows 7 Professional

Ways to extract repeated value from a function?

How can you retrieve attributes from a specific element within a dropdown menu?

Creating dynamic axes and series in Ext JS 4 on the fly

Variable missing in the ExpressJs view

Looking for insights on reading and presenting XML files from a URL? Learn how to achieve this effortlessly with the power

An easy CSS conundrum when hovering

Delightful Popup for Successful Woocommerce Additions

Sort the data - a selection menu is included in each row of the table

Updating lists using PHP and Ajax: a dynamic approach

Using Jquery colorbox to redirect or forward within the current colorbox container

Trouble encountered when utilizing jQuery for XML to HTML conversion and vice versa (CDATA mistakenly transformed into HTML comments)

Having trouble getting the Grid class to work in Tailwind with NextJs, any suggestions on why it might not be

Currently, I am expanding my knowledge of PHP and MySQL by working on a dynamic form that utilizes arrays. As I progress through the project,