RGBELoader : 'Cannot read properties of undefined'

[Oskawa]

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

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

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 )

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;
            texture.dispose();
            pmremGenerator.dispose();
        })

Here is what I’ve done with Nuxt :

const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
 pmremGenerator.compileEquirectangularShader();
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;
            texture.dispose();
            pmremGenerator.dispose();
        })

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

Researches :

Error in RGBELoader

Hi! im trying to load my hdr in promise function: import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; export default class Hdr { static load(src) { return new Promise(resolve => { const loader = new RGBELoader(); loader.load(src, resolve, undefined, exception => { throw exception; }); }); } } After that i use this function in promise.all: const [envMap, gltf, texture] = await Promise.all([ …

RGBELoader global file

Hi I was trying to create a sample app using Ar.js +Three.js. I was loading the Model in the scene after detecting the marker, but the model is coming with rough textures. I saw that RGBELoader enables the HDF reflection effect on the model textures, but Ar.js uses the only global Files. Where can I find the RGBELoader global file?

THREE.js RGBELoader doesn't work with Snowpackjs

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 e…

[Mugen87]

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…

[Oskawa]

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 !

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 !

[Mugen87]

@Oskawa

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

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.

Migration Guide

[marquizzo]

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

[Mugen87]

Here: three.js examples

[marquizzo]

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.