使用Threlte(Three.js)生成天空盒时颜色饱和度异常问题

我参照视频实现Threlte天空盒时，遇到纹理颜色饱和度明显偏低的问题。VS Code里显示的原图色彩鲜艳，但转为Three.js纹理后效果暗淡，两者差异显著。

问题代码（+page.svelte） #

<script>
    import * as Threlte from '@threlte/core';
    import * as Three from 'three';
    import * as Utils from 'three/src/math/MathUtils';

    import tex from '$lib/assets/pana2.jpg';

    // Load the panoramic image and create a texture
    const loader = new Three.TextureLoader();
    const texture = loader.load('/skybox/pana.jpg');

    // Create a spherical geometry and map the texture to it
    const skybox = new Three.SphereGeometry(500, 60, 40);

    // Flip the geometry inside out
    skybox.scale(-1, 1, 1);
</script>

<div class="scene">
    <Threlte.Canvas>
        <!-- Camera -->
        <Threlte.PerspectiveCamera position={{ x: 0, y: 0, z: 0.1 }} fov={75} near={0.1} far={1000}>
            <!-- Controls -->
            <Threlte.OrbitControls autoRotate autoRotateSpeed={0.25} />
        </Threlte.PerspectiveCamera>

        <!-- Lights the scene equally -->
        <Threlte.AmbientLight color={0xffffff} intensity={0.1} />

        <!-- Skybox -->
        <Threlte.Mesh geometry={skybox} material={new Three.MeshBasicMaterial({ map: texture })} />
    </Threlte.Canvas>
</div>

<style>
    .scene {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        background: radial-gradient(hsl(220 14% 20%), hsl(220 20% 10%));
        background-attachment: fixed;
    }
</style>

已尝试的无效操作 #

• 调整环境光参数
• 更换不同类型光源
• 修改图片存储路径
• 使用useTexture加载方法

解决方案 #

经排查，饱和度问题由图片编码格式导致，具体修复步骤如下：

1. 显式设置纹理色彩空间
   Three.js默认可能会将纹理按线性RGB解析，导致色彩饱和度降低。加载纹理后添加以下代码，强制使用sRGB色彩空间：

   texture.colorSpace = Three.SRGBColorSpace;
   

2. 验证图片编码
   若上述操作无效，检查图片是否为sRGB色彩空间。可通过图像编辑工具（如Photoshop、GIMP）重新导出图片，确保保存时选择sRGB格式，避免压缩过程中丢失色彩信息。

修改后的加载纹理代码片段：

const loader = new Three.TextureLoader();
const texture = loader.load('/skybox/pana.jpg');
// 强制设置sRGB色彩空间
texture.colorSpace = Three.SRGBColorSpace;

内容的提问来源于stack exchange，提问作者Jenson Bolton