THREE.js v136更新后FBX模型颜色异常，求Gamma校正示例

核心思路 #

v136版本移除了WebGLRenderer.gammaFactor和THREE.GammaEncoding，要还原之前的色彩表现，直接通过官方后期处理模块中的GammaCorrectionPass实现伽马校正即可。

步骤1：引入必要的后期处理模块 #

确保项目中引入以下三个核心模块：

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { GammaCorrectionPass } from 'three/addons/postprocessing/GammaCorrectionPass.js';

步骤2：初始化后期处理组件 #

替换原有的渲染初始化逻辑，创建EffectComposer并添加对应通道：

// 初始化WebGLRenderer（移除原gammaFactor、GammaEncoding相关配置）
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 若项目依赖旧版灯光逻辑，可保留此行
renderer.useLegacyLights = true;
document.body.appendChild(renderer.domElement);

// 创建后期处理合成器
const composer = new EffectComposer(renderer);

// 添加场景基础渲染通道（必须作为第一个通道）
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// 添加伽马校正通道（默认模拟原gammaFactor=2.2的效果）
const gammaPass = new GammaCorrectionPass();
composer.addPass(gammaPass);

步骤3：更新动画循环渲染逻辑 #

将原有的renderer.render(scene, camera)替换为合成器渲染：

function animate() {
  requestAnimationFrame(animate);

  // 你的场景更新逻辑（如模型旋转、相机控制等）
  // ...

  // 用合成器渲染替代原生渲染
  composer.render();
}
animate();

额外优化（可选） #

如果FBX模型材质色彩空间仍有异常，可遍历模型统一设置材质色彩空间：

// 遍历FBX模型所有子对象，修正材质色彩空间
model.traverse((child) => {
  if (child.isMesh) {
    child.material.colorSpace = THREE.SRGBColorSpace;
  }
});

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