HemisphereLight change colors automatically. Why?

Questions
1

Hi,
I added a HemisphereLight to my scene. My threejs version is 0.156.0

  const hemiLight = new THREE.HemisphereLight(0xFFFFFF, 0xDBDBDB, 3);
  const lightcontainer.add(hemiLight);

....some code....

scene.add(lightscontainer);

I added GUI to find the best light for my scene.

  const gui = new GUI({ width: 260 });
  const hlightFolder = gui.addFolder('hemiLight');
  hlightFolder.add(hemiLight, 'intensity', 0, 5);
  hlightFolder.addColor(hemiLight, 'color');
  hlightFolder.addColor(hemiLight, 'groundColor');

Everything work fine except my HemisphereLight color changed!
From 0xDBDBDB to 0xb4b4b4 in the GUI. I try different values but all become darker.
Same thing happen:

  • if I put another value in the skycolor or groundcolor.
  • if I remove the gui (maybe the gui changed it but no)
  • if I put the color in different format like rgb 0xDBDBDB => 219,219,219 (maybe a conversion error but no)
  • if I set the color after the constructor (hemiLight.color.set)

The strange thing too is if I set the color within in the GUI. The color is well set…

Any idea why the HemisphereLight colors are darken and updated automatically ?

2

This is likely a color space issue — most color pickers are not color managed, and you’ll need to assume their data is sRGB. Something like this should fix it:

const params = { color: hemiLight.color.getHex() };

gui.addColor(params, 'color').onChange((hex) => {
  hemiLight.color.setHex(hex);
});

This works because three.js assumes that hexadecimal and CSS-string colors are sRGB by default. Other methods of getting/setting a color assume the color space used for rendering (Linear sRGB), and you’d need to specify if they’re anything else.

More details:

2 Likes
3

Thanks it’s work!