react-three-fiber scene background brighter than original image-CodePudding

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:

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:

(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:

CodePudding user response：

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

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