gltf/glb 模型在 three.js 中渲染为纯黑色，通常并非单纯光照不足所致，而是材质未正确启用自发光（emissive）通道或纹理映射缺失；本文提供安全、鲁棒的材质修复方案，并涵盖光照配置、加载优化与常见陷阱排查。
gltf/glb 模型在 three.js 中渲染为纯黑色，通常并非单纯光照不足所致，而是材质未正确启用自发光（emissive）通道或纹理映射缺失；本文提供安全、鲁棒的材质修复方案，并涵盖光照配置、加载优化与常见陷阱排查。
在使用 THREE.GLTFLoader 加载 GLTF/GLB 模型时，模型呈现全黑（如您截图所示）是一个高频问题。虽然初学者常归因于“缺少灯光”，但您的代码已正确添加了环境光（AmbientLight）和两个白光点光源——这说明问题根源往往在于材质本身的着色器行为：GLTF 规范中部分导出器（如 Blender 默认设置）会将基础颜色（baseColorFactor）和纹理（baseColorTexture）仅写入 color 与 map 字段，而未同步赋值给 emissive 和 emissiveMap。由于 Three.js 的 MeshStandardMaterial（GLTF 默认材质）默认不启用自发光贡献，当光照计算因法线异常、PBR 参数缺失或 HDR 环境贴图未配置等原因失效时，模型便彻底“失色”。
✅ 正确的修复逻辑是：在加载后遍历所有 Mesh，安全地将基础颜色/贴图提升为自发光属性，从而确保即使光照未生效，模型仍能以固有色可见（尤其适用于调试与快速预览）：
function loadModel(modelIndex) {
const loader = new THREE.GLTFLoader();
loader.load(
models[modelIndex],
(gltf) => {
// 安全遍历并修复材质
gltf.scene.traverse((child) => {
if (child.isMesh && child.material) {
// 仅当存在基础纹理时才启用 emissiveMap，避免空引用
if (child.material.map) {
child.material.emissive.copy(child.material.color);
child.material.emissiveMap = child.material.map;
child.material.emissiveIntensity = 1.0; // 显式设为1，确保生效
} else {
// 无纹理时，仅增强自发光颜色（避免纯黑）
child.material.emissive.copy(child.material.color).multiplyScalar(0.5);
}
// 强制启用自发光通道（关键！）
child.material.needsUpdate = true;
}
});
scene.clear();
scene.add(gltf.scene);
gltf.scene.rotation.y = Math.PI * -0.75;
},
undefined,
(error) => console.error('模型加载失败:', error)
);
}
⚠️ 注意事项与进阶建议：
-
不要直接修改 scene.clear()：scene.clear() 会移除所有灯光、相机、辅助对象等，导致后续渲染无光照。应改用 scene.remove(...) 逐个清理旧模型：
// 替换 scene.clear() 的安全做法： if (currentModel) scene.remove(currentModel); currentModel = gltf.scene; scene.add(currentModel);
GLB 优于 GLTF：.glb 是二进制封装格式，能内嵌纹理、减少 HTTP 请求，并规避路径解析错误。强烈建议将模型导出为 GLB（Blender → Export → glTF 2.0 → 勾选 “Export as Binary (.glb)”）。
-
光照调试技巧：
- 临时替换为 MeshBasicMaterial 验证模型几何与UV是否正常：
child.material = new THREE.MeshBasicMaterial({ color: child.material.color, map: child.material.map }); - 使用 THREE.HemisphereLight 提供更自然的全局漫射光：
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1); scene.add(hemiLight);
- 临时替换为 MeshBasicMaterial 验证模型几何与UV是否正常：
PBR 材质完整性检查：若模型本应支持物理渲染（金属度/粗糙度），请确认导出时启用 PBR 支持（Blender 中勾选 “Export Materials”、“Export Textures”），并在 Three.js 中启用 renderer.outputEncoding = THREE.sRGBEncoding 及 renderer.toneMapping = THREE.ACESFilmicToneMapping。
总结：全黑问题本质是渲染管线中“颜色输出通路”的中断。通过 traverse + emissive 修复可快速恢复可视性，但长期应聚焦于规范导出（GLB + PBR）、合理光照架构与 Three.js 渲染配置协同。调试时始终优先验证几何、UV、材质三要素，再排查光照——这才是专业 GLTF 工作流的基石。
