Change HDR on execution time

Questions
1

I’ve been searching the web a lot on how I can change the HDR by selecting it from a “li” list at runtime. I have tried calling the code from a function like this:

function changeHDRI(nHdri) {
    new THREE.RGBELoader()
        .setDataType(THREE.UnsignedByteType)
        .setPath( './HDR/'  )
        .load("windowStudio.hdr", function(texture) {
            console.log("i am here!!!!!");

            var envMap = pmremGenerator.fromEquirectangular(texture).texture;

            scene.background = envMap;
            scene.environment = envMap;

            texture.dispose();
            pmremGenerator.dispose();
        });
}

but I get the error “Uncaught ReferenceError: pmremGenerator is not defined”.

Anyone have any ideas? thanks.

2

Well - it’s caused by the fact that pmremGenerator is not defined, and you’re trying to use its fromEquirectangular. :’)

Create the generator in place of that pretty console log and it should be fine:

.load("windowStudio.hdr", function(texture) {
  // Make sure renderer is created and defined somewhere globally before loading the HDRI
  const pmremGenerator = new THREE.PMREMGenerator(renderer);

  var envMap = pmremGenerator.fromEquirectangular(texture).texture;

  scene.background = envMap;
  scene.environment = envMap;

  texture.dispose();
  pmremGenerator.dispose();
});

(In examples it’s usually created somewhere around the renderer initialisation, and stored globally.)

3

The error you said was due to the scope of the pmremGenerator declaration since it was inside the init () function and I called it again outside of this function so I only had to change it to global. A very basic error but sometimes you get stuck on things so small that you don’t see them after having large extensions of code.

Thank you very much for your help,
Greetings.