Search code examples
reactjsthree.jsreact-three-fiber

react-three-fiber scene background brighter than original image

My react-three-fiber background is supposed to be a dark starry sky. But in the scene it is very bright. Here is the original image: Original issues image

This is the code for the skybox:

const { scene } = useThree();

const texture = useLoader(TextureLoader, "textures/skybox.jpg");

scene.background = texture;

This is what the scene rendered:

Image of the scene

(Don't worry about the blurriness. It is just because I took a screen shot of such a small area of my screen.)

I am asking about the brightnessI asked in the Poimandres Discord server and one of the admins said that it may be an encoding error and to ask here.

Edit:

Thanks to Marquizzo for solving the issue. I just added texture.encoding = THREE.sRGBEncoding; and the background became this:

Fixed background

Solution

  • It might be an issue with your texture color space property. By default textures use THREE.NoColorSpace, but for a straight background JPG that doesn't interact with lighting you could use sRGB.

    const texture = useLoader(TextureLoader, "textures/skybox.jpg");
texture.colorSpace = THREE.SRGBColorSpace;
scene.background = texture;