I've been working on toggling a HDR map in three.js.
This is how I set it up:
//HDR 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;
}
Everything seems fine at this point.
Next, I added 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, when trying to implement the toggle logic, the console always shows 'false':
function updateHdr() {
if (params.switch == true)
{
scene.environment = texture
console.log("true")}
else
{scene.environment = null
console.log ("else switch false")
}
}
The HDR loads and turns off correctly with the button click, but has issues turning back on.