7

This has been bugging me for a while. Why the material colors in react-three-fiber appears to be dull than in threejs

  • Objects and their properties are same in both implementations.
  • threejs version is same.
  • Implemented in freshly bootstraped create-react-app with no additional dependencies.

Threejs

enter image description here

react-three-fiber

enter image description here

devAhsan
  • 223
  • 2
  • 10
  • 4
    It looks like react-three-fiber probably has tone mapping enabled by default, which shifts colors a bit. You could enable that in three.js with the `renderer.toneMapping` setting, but I don't know what setting is used to disable it in react-three-fiber... – Don McCurdy Nov 18 '20 at 19:11

3 Answers3

9

As answered by Don McCurdy, setting renderer toneMapping to default one does help.

<Canvas onCreated={({ gl }) => { gl.toneMapping = THREE.NoToneMapping }}>
devAhsan
  • 223
  • 2
  • 10
6

r3f uses correct gamma in a srgb colorspace and automatically converts colors and textures to srgb. this is similar to what aframe does. threejs has incorrect gamma settings in a linear colorspace, which is not very usable. wrong gamma is the #1 reason for cheap, plasticy looking 3d scenes. see: https://www.donmccurdy.com/2020/06/17/color-management-in-threejs

if you want a linear colorspace, just do: <Canvas colorManagement={false}> and now your colors will match.

hpalu
  • 1,357
  • 7
  • 12
  • Getting ``React does not recognize the `colorManagement` prop on a DOM element.`` using ``react-three-fiber ^8.0.0`` – Monstar Jun 09 '22 at 15:50
5

The following combination gave me the best match to my colors in threejs.

  <Canvas
    gl={{ antialias: true, toneMapping: THREE.NoToneMapping }}
    linear
  >

Thank you Don and devAhsan.

Bill O
  • 315
  • 4
  • 13