How to make sprite show a picture without distorting colors?

I am learning about THREE.js and struggling to add an image in scene without the colors looking washed out.

I tried changing the encoding too, but the colors are still off:

    texture.encoding = trySomethingNew ? THREE.LinearEncoding : THREE.sRGBEncoding;

Any pointers or ideas?

Solution

Adjusting the tone mapping settings seems to bring out the correct colors on the bike. You can adjust the material directly with toneMapped={false}

<spriteMaterial toneMapped={false} attach="material" map={texture} color={"white"} />

or disable tone mapping for the entire scene by adding flat to the <Canvas> tag. For more info about canvas properties: https://docs.pmnd.rs/react-three-fiber/api/canvas

<Canvas flat>
...