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