# Unable to Load HDRI image as environment

**URL:** <https://discourse.threejs.org/t/unable-to-load-hdri-image-as-environment/67116>\
**Category:** Questions\
**Tags:** hdr, loaders, textures\
**Created:** [June 21, 2024, 1:48pm UTC](https://discourse.threejs.org/t/unable-to-load-hdri-image-as-environment/67116 "2024-06-21T13:48:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![aseyedia](https://avatars.discourse-cdn.com/v4/letter/a/46a35a/32.png) [@aseyedia](https://discourse.threejs.org/u/aseyedia)\
**Post date:** [June 21, 2024, 1:48pm UTC](https://discourse.threejs.org/t/unable-to-load-hdri-image-as-environment/67116/1 "2024-06-21T13:48:06Z")

</div>

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:

```javascript
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:

```javascript
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 `.hdr`s in question are valid and have even attempted to replicate [loader / texture / hdr](https://threejs.org/examples/?q=hdr#webgl_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](https://threejs.org/examples/?q=hdr#webgl_loader_texture_hdr) 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!

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [June 22, 2024, 3:19pm UTC](https://discourse.threejs.org/t/unable-to-load-hdri-image-as-environment/67116/2 "2024-06-22T15:19:51Z")

</div>

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

[https://threejs.org/examples/webgl\_materials\_envmaps\_hdr](https://threejs.org/examples/webgl_materials_envmaps_hdr)

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [June 22, 2024, 6:36pm UTC](https://discourse.threejs.org/t/unable-to-load-hdri-image-as-environment/67116/3 "2024-06-22T18:36:27Z")

</div>

@aseyedia maybe try removing the following line

```js
.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](https://githubdragonfly.github.io/viewers/templates/Texture%20Viewer.html) 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.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [June 22, 2024, 6:42pm UTC](https://discourse.threejs.org/t/unable-to-load-hdri-image-as-environment/67116/4 "2024-06-22T18:42:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![aseyedia](https://avatars.discourse-cdn.com/v4/letter/a/46a35a/32.png) [@aseyedia](https://discourse.threejs.org/u/aseyedia)\
**Post date:** [June 22, 2024, 7:28pm UTC](https://discourse.threejs.org/t/unable-to-load-hdri-image-as-environment/67116/5 "2024-06-22T19:28:56Z")

</div>

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.