CODEWITHSUNDEEP
reactjsthree.jsreact-three-fiber
Adam Turaj
Adam Turaj

Reputation: 126

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

Upvotes: 4

Views: 4037

Answers (1)

M -
M -

Reputation: 28462

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;

Upvotes: 5

Related Questions