THREE.js RGBELoader doesn't work with Snowpackjs

Questions
1

I was recently trying to load an .hdr file into three.js.

This was my code:

new RGBELoader()
    .setDataType( UnsignedByteType )
    .load( royal_esplanade_1k, function ( texture ) {
    var envMap = pmremGenerator.fromEquirectangular( texture ).texture;
    this.scene.background = envMap;
    this.scene.environment = envMap;
    texture.dispose();
    pmremGenerator.dispose();
})

Code to import the hdr file

import royal_esplanade_1k from './assets/royal_esplanade_1k.hdr'

I received this error:

error

It looks to me that the hdr file binary was added to the link, but thatā€™s not what is supposed to happen.

I am pretty sure this is a bundler issue, as it works on codesandbox(which uses a different bundler). I am using SnowpackJS

Please help me on this

2

try putting it into the /public folder and then just use the ā€œ/file.hdrā€ path. the new es bundlers have some weird bugs and gotchas still.

3

sadly, that didnā€™t work. I guess I will have to switch my bundler

4

I use Snowpack to serve the examples in this repository: glTF-Transform-Render ā€¦ I havenā€™t tried fetching .hdr files with an import statement there, but it does let me use their relative URLs just fine. I donā€™t think Iā€™ve done anything special to support that, but would note that Snowpack doesnā€™t like to serve any files outside of the project root directory.

1 Like
5

Will it work if I keep the assets in the src folder? It doesnā€™t work for me then, so I tried keeping the assets folder outside of the src folder(like what you did), and instead do ā€˜ā€¦/assets/royal_esplanade_1k.hdrā€™. That didnā€™t work either.

I got: Not Found (/assets/royal_esplanade_1k.hdr). Were you able to do these kinds of imports when using snowpack dev?

6

Iā€™m running:

snowpack dev --config snowpack.config.cjs

From the root directory of the project. I donā€™t know if Snowpack gives any special treatment to folders with names like assets or src or public, as some other bundlers do.

Maybe the place to start would be visiting localhost:8080/assets/royal_esplanade_1k.hdr (or whatever port you need) to make sure your browser finds the file there, first? Keep in mind that URLs are relative to the HTML page, not the JS file in src/, when doing loader.load(...).

1 Like
7

I figured out the problem. I installed an npm package that converted non-js packages into js(because that was supposed to help snowpack load raw files). I donā€™t need that package anymore.

1 Like