I'm trying to turn on and off a hdr map in three js.
This is how I create it
//HDRI LOADER
var envmaploader = new THREE.PMREMGenerator(renderer);
const loadhdri = new THREE.RGBELoader()
.load("myhdr.hdr", function (texture){
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
})
So far so good.
I then add it to the gui:
var gui = new dat.gui.GUI();
var params = {switch: true}
const lightsFolder = gui.addFolder('Customize lights')
lightsFolder.add(params, "switch").name('hdrenv').onChange(updateHdr)
Finally, I try to specify the on/off logic, but when I read the console logs, it's always printing 'false'
function updateHdr() {
if (params2==true)
{
scene.environment = texture
console.log("true")}
else
{scene.environment = null
console.log ("else switch false")
}
}
Note that the hdr loads correctly, turns off correctly when I click the switch button, but never turns on again.
Try to write your updateHdr function like so:
function updateHdr( value ) {
if ( value === true ) {
scene.environment = texture;
console.log( 'true' );
} else {
scene.environment = null;
console.log( 'else switch false' );
}
}