Why does a white mesh look gray

[maxwellhankner]

I'm wondering why every mesh I create with a color = white or "#ffffff" is showing up gray. I'm new to R3F so I don't know where to start looking for this answer, but I'm replicating a project I made in normal Three.js and the scenes do not look the same.

function BoxMesh({ position }) { return ( <mesh position={position}> <boxBufferGeometry args={[1, 1, 1]} /> <meshLambertMaterial color="#ffffff" /> </mesh> ); }

And the only light source is an <ambientLight />

I would very much appreciate any help or direction with this. THANK YOU!

[drcmda]

it is color managed. <Canvas colorManagement={false} "fixes" it, but it is three that displays colors wrong, see https://www.donmccurdy.com/2020/06/17/color-management-in-threejs

in the real world there is no white, colors are influenced by light. with a correct colorspace you can still do toneMapped=false on materials. i would not recommend switching colorManagement off.

[maxwellhankner]

Thanks Paul!

toneMapped=false looks very close and colorManagement=false looks exactly as it does in my original three.js project. So thank you for that.

Does that sound right though? is stock R3F setup up with some adjustments? Or are they the same and I'm probably just not seeing something in my original three.js project's code?

[drcmda]

three cant manage colors because it doesnt control the graph, it has no lifecycles. managing means every color, every texture, systemwide. it must use a linear colorspace therefore and it delegates the responsibility for correct gamma to the end user. r3f knows the full graph and manages colors by default. so yes, it slightly differs in that aspect.