RGBELoader : 'Cannot read properties of undefined'

Hello there fellas,
It’s been a while since last time !

So many things happened and that’s why I’m here today! :smiley:

I work with wordpress for a while now, and I succeed to implement threeJS, but now, it’s time to go further and work with something else : node.js and nuxt !

The idea is to pass from CDN (with wordpress) to NPM install, etc. (Yes, that’s my life, nobody cares, but I like to explain the background :smiley: )

I managed to import three.js and the modules quite easily :
I recreated my scene, imported my GLTF model, used CSS2D renderer but now, I have a problem with RGBELoader !

Here is what I’ve done with js file classic (wordpress)

new THREE.RGBELoader().setDataType(THREE.UnsignedByteType).load('/wp-content/themes/portfolio/js/venice.hdr', function(texture) {
            const envMap = pmremGenerator.fromEquirectangular(texture).texture;
            scene.background = envMap;
            scene.environment = envMap;

Here is what I’ve done with Nuxt :

const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
new RGBELoader().setDataType(THREE.UnsignedByteType).load('/models/venice.hdr', function(texture) {
            const envMap = pmremGenerator.fromEquirectangular(texture).texture;
            this.scene.background = envMap;
            this.scene.environment = envMap;

The difference :

  1. I deleted the “THREE.” before “RGBELoader()”
  2. I imported the module from jsm/
  3. I put the venice.hdr inside the static folder
  4. i saw @Mugen87 on other questions so I tried this : pmremGenerator.compileEquirectangularShader();

But now I have this log inside my browser :

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘length’)
at eval (three.module.js?5a89:38723)

I really don’t understand : my file is loaded, I can see it the network tab on the developer tool.

So I thought : Maybe there is a problem with .hdr in vue.js / Nuxt.js but I didn’t see anything related to this kind of problem.

Could you help me find a solution to correctly load envMap for my model ?

THANK YOU :grin:

Researches :

Do you mind sharing a link to your application so it’s possible to debug the issue?

BTW: With recent three.js versions it’s sufficient to do this:

new RGBELoader().load('/models/venice.hdr', function(texture) {

    this.scene.background = texture;
    this.scene.environment = texture;

} );

There is no need to work with PMREMGenerator anymore.

Another thing: Are you sure you can use the this reference in your onLoad() callback? Since the callback is not implemented as an arrow function, this probably points to the wrong object…


Oh. God.
Mugen, you know it’s almost Christmas, I think I need to give you a present for all the time, you helped me / us ! :smiley:

Yes of course, the problem is right in front of me ! I tried to create a variable juste before my function to not use “this” inside the callback, and that’s it ! I will try later with an arrow function to see if I can make it this way too.
Also I deleted the PMREMGenerator, that’s so much easier.

Do you mind sharing a link to your application so it’s possible to debug the issue?

I will post the github repo soon with my code working

Question :

There is no need to work with PMREMGenerator anymore.

How can I know that? Where can I find changes like this one ?

Once again, thank you @Mugen87 !

There is a migration guide that lists all release notes which potentially produce a migration task on app level. The mentioned change of PMREMGenerator is noted in the 131 release section.

Where can we find a demo of this new method in action? I’m looking at this example that uses .hdr images, and it’s still using PMREMGenerator. Same with this other example

Here: three.js examples

1 Like

Thank you! So technically, these 2 lines can be swapped with:
texture.mapping = THREE.EquirectangularReflectionMapping; and setting the scene.environment = texture instead of assigning it to the material.envMap property.