directionalLight: color difference when using number/string instead of THREE.Color

[tomadimitrie]

Consider this code:

<directionalLight
      color={new THREE.Color().setHSL(0.1, 0.7, 0.5)}
      intensity={0.1}
      position={[0, -1, 0]}
 />

If I replace the color with what the getHexString() method returns (in this case d89126, so it's either "#d89126" or 0xd89126), or what getHex() returns (14192934), the color is darker.

[drcmda]

If you have a canvas with the colorManagement flag it will automatically covert colors to srgb. But this can't work if you put objects in it, which I wouldn't recommend since it would recreate these on every render. See https://github.com/react-spring/react-three-fiber/blob/master/api.md#objects-and-properties

If you must work with objects use useMemo and if you want correct colors in threejs you must call convertLinearToSrgb on it or something like that.

[tomadimitrie]

If you have a canvas with the colorManagement flag it will automatically covert colors to srgb. But this can't work if you put objects in it, which I wouldn't recommend since it would recreate these on every render. See https://github.com/react-spring/react-three-fiber/blob/master/api.md#objects-and-properties

If you must work with objects use useMemo and if you want correct colors in threejs you must call convertLinearToSrgb on it or something like that.

Thank you for your answer. The thing is colorManagement was enabled and it was working fine with objects, but apparently not with numbers/strings

[drcmda]

When you pass a number or a string it calls the set method of the underlying object, in this case three.color. that's why it can auto correct it, because there's a static reference. If you pass an object it would have to mutate it, and that's a no go.