react-three-fiber场景星空背景过亮问题求助及解决方法

问题描述 #

在react-three-fiber中将深色星空图设为场景背景后，渲染出的背景亮度明显高于原图。

相关信息 #

• 原图：
• 天空盒实现代码：

const { scene } = useThree();

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

scene.background = texture;

• 渲染效果：（截图模糊为截取区域过小导致，与亮度问题无关）

经Poimandres Discord服务器管理员提示，问题可能源于编码错误。

解决方案 #

添加texture.encoding = THREE.sRGBEncoding;后，背景显示恢复正常：

const { scene } = useThree();

const texture = useLoader(TextureLoader, "textures/skybox.jpg");
texture.encoding = THREE.sRGBEncoding; // 新增编码设置

scene.background = texture;

修复后效果：

内容的提问来源于stack exchange，提问作者Adam Turaj