OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Unable to Load HDRI image as environment with Three.js

  • Thread starter Thread starter CelineDion
  • Start date Start date
C

CelineDion

Guest
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:

Code:
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:

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

<p>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 <code>HDRCubeTextureLoader</code> and <code>RGBELoader</code>, but I can't seem to get it to work. Specifically, I am getting a "bad file format" error in the Chrome console:</p>
<pre><code>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)
</code></pre>
<p>The line in question that it's referencing in <code>main.js</code> is the line with <code>.load(hdrPath, function (texture) {</code> in:</p>
<pre><code>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");
});
}
</code></pre>
<p>I have made sure that the <code>.hdr</code>s in question are valid and have even attempted to replicate <a href="https://threejs.org/examples/?q=hdr#webgl_loader_texture_hdr" rel="nofollow noreferrer">loader / texture / hdr</a> using the same HDR to no avail.</p>
<p>I have ensured that the <code>.hdr</code> files are valid and have even attempted to replicate the <a href="https://threejs.org/examples/?q=hdr#webgl_loader_texture_hdr" rel="nofollow noreferrer">HDR texture loader example</a> using the same HDR files, but I still encounter the same error.</p>
<p>For additional context, I am using Webpack for my build setup, along with NPX and Vite.</p>
<p>Any guidance on how to resolve this issue would be greatly appreciated.</p>
<p>Thanks in advance!</p>
 

Latest posts

Top