React Three加载GLB替代FBX后模型过暗问题排查

将代码从加载FBX模型改为加载GLB模型后，模型显示过暗，程序化添加的着色器未做修改。显示效果从原本的正常状态变为过暗状态，尝试将颜色管理设为线性模式后，模型反而更暗。

相关代码如下：

App.js #

<Canvas
  camera={{
    position: [-7, 4, 7],
    fov: 40,
  }}
  style={{ width: "50vw", height: "100vh", marginLeft: "50vw" }}
>

  <ambientLight intensity={2} />
  <pointLight castShadow position={[40, 40, 40]} />
  <OrbitControls target={[0, 2.5, 0]} />
  <Suspense fallback={null}>
    <group
      rotation={[-Math.PI / 2, -0.15, Math.PI / 2]}
      position={[2, 3, 1]}
    >
      {Models.map((model) => (
        <Model
          key={model.id}
          path={"static/models/" + model.filename}
          scale={[10, 10, 10]}
          active={model.id === activeModel}
          envMap={envMap}
        />
      ))}
    </group>
  </Suspense>
</Canvas>

Model.js #

const Model = ({ path, scale, active, envMap }) => {
const textureLoader = new TextureLoader();
var textureBrushed = textureLoader.load(
  "static/models/textures/brushedMetal_5_bump.jpg"
);
textureBrushed.wrapS = RepeatWrapping;
textureBrushed.wrapT = RepeatWrapping;
textureBrushed.repeat.set(0.1, 10);

const matMetal_Copper_Brushed = new MeshStandardMaterial({
  color: 0xffcf46,
  roughness: 0.3,
  roughnessMap: textureBrushed,
  envMap: envMap,
  envMapIntensity: 1.0,
  metalness: 1.0,
});

const matMetal_Steel_Brushed = new MeshStandardMaterial({
  color: 0x8b7560,
  roughness: 0.2,
  envMap: envMap,
  envMapIntensity: 1.0,
  metalness: 1.0,
});

const ref = useRef();
const { scene } = useGLTF(path);

const { position } = useSpring({
  position: active ? [0, 0, 0] : [-10, 0, 0],
});

scene.traverse((mesh, i) => {
  if (mesh.isMesh) {
    if (mesh.material.name === "Copper") {
      mesh.material = matMetal_Copper_Brushed;
    } else if (mesh.material.name === "silver") {
      mesh.material = matMetal_Steel_Brushed;
    }
  }
});

return (
  <animated.primitive
    rotation={[-Math.PI / 2 - 0.15, 0, 0]}
    object={scene}
    dispose={null}
    ref={ref}
    scale={scale}
    position={position}
  />
);
};

• 颜色空间不匹配
  GLB格式默认使用sRGB颜色空间存储材质信息，但你创建MeshStandardMaterial时直接传入的十六进制颜色（如0xffcf46）在Three.js中默认是线性空间，两者冲突会导致颜色被错误转换，出现过暗。
  解决：将材质颜色转换为sRGB空间，比如用new THREE.Color().setSRGB(0xffcf46)替代直接传十六进制值；或者检查GLB导出时的颜色空间设置，确保和场景统一。

• 模型材质未完全替换
  GLB模型中可能存在部分Mesh的材质名称和你判断的"Copper"、"silver"不匹配，这些Mesh依然使用模型自带的暗材质，拉低整体亮度。
  解决：在scene.traverse中添加日志，打印所有Mesh的material.name，确认是否有遗漏的材质未被替换；或者直接强制替换所有Mesh的材质进行测试。

• 纹理颜色空间设置错误
  你的roughnessMap纹理是JPG格式，GLB导出时可能默认将纹理标记为sRGB空间，但roughnessMap属于线性数据，需要设置为线性编码。如果纹理编码不匹配，会影响材质的粗糙度计算，导致模型偏暗。
  解决：给纹理添加textureBrushed.encoding = THREE.LinearEncoding。

• 灯光相对模型的强度不足
  GLB模型的原始尺寸可能和FBX模型不同，即使设置了scale=[10,10,10]，也可能导致模型实际渲染尺寸更大，相同强度的灯光照射下显得更暗。
  解决：尝试提高ambientLight的intensity（比如调到3-5），或者调整pointLight的位置和强度，让灯光更贴近模型。

• 颜色管理重复处理
  Three.js的Canvas在react-three-fiber中默认已经启用线性颜色管理，手动再次设置线性模式会导致颜色被双重转换，反而更暗。
  解决：移除手动设置的线性颜色管理，保持默认配置即可。

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