Three.js设置renderer.OutputEncoding为sRGBEncoding后纹理发灰如何解决

1. 优先校正布料颜色纹理的编码配置 #

这是此类纹理偏灰问题的最常见诱因：Three.js默认所有纹理的编码为LinearEncoding，当渲染器全局设置sRGBEncoding输出时，如果你的布料颜色纹理本身是sRGB格式的普通图像，没有手动标记编码会导致管线做二次伽马校正，最终输出偏灰。
配置代码如下：

// 布料纹理加载完成后立即设置编码
const clothColorMap = textureLoader.load('你的布料纹理路径');
// 标记为sRGB格式的颜色纹理，渲染管线会做正确的颜色转换
clothColorMap.encoding = THREE.sRGBEncoding;
clothColorMap.needsUpdate = true;

const clothMaterial = new THREE.MeshStandardMaterial({
  map: clothColorMap,
  transparent: false,
  // 其余原有材质参数保持不变
});

该操作仅修改布料纹理的采样逻辑，不会影响已经显示正常的草地纹理，只需确认草地纹理也已正确设置sRGBEncoding即可。

2. 全局色调映射调整（适合整体场景对比度不足时使用） #

如果校正纹理编码后仍然觉得整体色彩偏平，可以开启更自然的色调映射策略，微调全局曝光，全程保留sRGB输出编码：

// 可选ACES电影级色调映射，色彩过渡和对比度更自然
renderer.toneMapping = THREE.ACESFilmicToneMapping;
// 曝光系数，默认值为1，数值越高画面越亮，根据实际效果调整即可
renderer.toneMappingExposure = 1.15;

3. 单独增强布料对比度（不影响其他场景元素） #

如果只需要调整布料的对比度、不想改动草地等其他元素的显示效果，可以通过材质的onBeforeCompile钩子注入自定义着色器逻辑，单独对布料纹理做对比度校正：

const clothMaterial = new THREE.MeshStandardMaterial({
  map: clothColorMap,
  transparent: false
});
// 对比度系数，大于1为提升对比度，推荐在1.2~2.0区间内调整
const clothContrast = 1.4;

clothMaterial.onBeforeCompile = (shader) => {
  shader.fragmentShader = shader.fragmentShader.replace(
    'vec4 diffuseColor = vec4( diffuse, opacity );',
    `
    vec4 diffuseColor = vec4( diffuse, opacity );
    // 对比度校正
    diffuseColor.rgb = (diffuseColor.rgb - 0.5) * ${clothContrast.toFixed(2)} + 0.5;
    diffuseColor.rgb = clamp(diffuseColor.rgb, 0.0, 1.0);
    `
  )
}

注意事项 #

• 仅颜色类纹理（map、emissiveMap等）需要设置sRGBEncoding，法线贴图、粗糙度贴图、金属度贴图这类数据类纹理请保持默认的LinearEncoding，错误设置会导致渲染结果异常。
• 不建议直接修改材质color属性乘亮纹理，容易出现色阶断层，优先选择编码校正和对比度调整方案。

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