Three.js导入GLB模型显示黑色物体的技术求助

我之前也碰到过一模一样的情况，控制台能打印模型信息说明加载流程是通的，变黑大概率是材质光照不匹配或者灯光配置不到位导致的，给你几个排查方向和解决办法：

1. 先给材质加基础色快速验证 #

有时候GLB模型的材质可能丢失了基础色或贴图，你可以在遍历Mesh时强制设置一个颜色，快速确认是不是材质本身的问题：

objLoader.load('chair.glb', (gltf) => {
  let root = gltf.scene;
  root.traverse( child => {
   if (child.isMesh) {
    child.castShadow = true;
    child.receiveShadow = true;
    // 临时给材质设置白色基础色
    child.material.color.set(0xffffff);
    // 如果是PBR材质，调整粗糙度和金属度让光照更自然
    if(child.material.isMeshStandardMaterial){
      child.material.roughness = 0.5;
      child.material.metalness = 0.2;
    }
   }
  });
  // ... 你的其他模型配置代码
});

如果模型变白色了，说明原模型的材质配置有问题，需要检查导出时的材质设置。

2. 手动添加明确的灯光（不要依赖组件默认灯光） #

虽然你设置了addLight={true}，但组件默认灯光可能位置、强度不足，或者类型不匹配PBR材质的需求。手动添加一组灯光测试：

Setup = (scene, camera, renderer) =>{
 this.scene = scene
 // 先添加环境光+方向光组合，确保模型被充分照亮
 const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
 scene.add(ambientLight);
 const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
 directionalLight.position.set(5, 10, 7.5); // 调整位置让灯光正面照射模型
 directionalLight.castShadow = true;
 scene.add(directionalLight);

 const objLoader = new GLTFLoader();
 objLoader.load('chair.glb', (gltf) => {
  // ... 你的加载代码
 });
 this.camera = camera
 this.renderer = renderer
}

加完后如果模型正常显示，说明组件默认灯光的配置不符合你的模型需求。

3. 开启颜色空间校正 #

GLB模型通常使用sRGB颜色空间，如果渲染器没开启对应编码，会导致颜色显示异常甚至发黑：

// 在Setup函数中给renderer设置编码
this.renderer = renderer;
renderer.outputEncoding = THREE.sRGBEncoding;

// 加载模型时同步设置贴图的编码
objLoader.load('chair.glb', (gltf) => {
  let root = gltf.scene;
  root.traverse( child => {
   if (child.isMesh) {
    child.castShadow = true;
    child.receiveShadow = true;
    // 如果模型有贴图，设置正确的sRGB编码
    if(child.material.map){
      child.material.map.encoding = THREE.sRGBEncoding;
    }
   }
  });
  // ... 其他代码
});

4. 检查模型本身的导出问题 #

如果上面的方法都没用，可能是模型导出环节出了问题：

• 用Blender打开chair.glb，检查材质是否正常显示、有没有缺失纹理；
• 导出时确保勾选嵌入纹理选项，不要把纹理文件单独放在外部；
• 确认材质使用的是Three.js支持的类型（比如对应MeshStandardMaterial的PBR材质）。

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