Colour inconsistent with default THREE renderer

[enijar]

I have a GLTF file being loaded and rendered using a basic canvas with a single light source (AmbientLight) in both three and r3f. For some reason the r3f version is very bright and is converting some textures from black to white. Does anyone know why this happens and if this can be resolved?

Outputs

three	r3f

Demos

three	r3f
https://codesandbox.io/s/vibrant-knuth-vip8s?file=/src/App.js	https://codesandbox.io/s/inspiring-montalcini-focx1?file=/src/App.js

[CodyJasonBennett]

Three.js defaults to linear color space, whereas R3F configures SRGB. You can disable this behavior by specifying linear on your canvas:

<Canvas linear />

What was formerly colorManagement is now true by default since v6, and linear serves to disable this behavior.

See the note in https://docs.pmnd.rs/react-three-fiber/API/canvas#defaults-that-the-canvas-component-sets-up.

[enijar]

Adding the linear prop to the canvas does improve the colours, but the text on the t-shirt is still vastly different from the three version:

Do you know why this would be happening in a r3f environment?

[CodyJasonBennett]

Might be related to the overwritten tone-mapping. I'd try adding the flat prop in addition.

[enijar]

I've added both flat and linear to the canvas but it still renders textures the same. I'm not too familiar with the internals of how r3f is modifying textures (if it does). Any other ideas why this could be happening?

[dangrabcad]

I've just opened both your sandboxes and they look identical. In both cases the word "CERTIFIED" is white with a darker outline, like in your third screenshot.