GLB模型在A-Frame中显示全黑，其他GLTF Viewer显示正常求助

以下是针对问题的具体排查方向和解决建议：

1. 检查Blender导出的材质兼容性 #

• 确保模型使用Principled BSDF材质，A-Frame依赖的Three.js对PBR材质的支持以此为标准，避免使用Blender旧版材质（如Blender Internal）。
• 导出GLB时勾选「Export PBR Materials」选项，确认纹理关联正确，无路径丢失或相对路径错误。

2. 移除不必要的加载配置 #

最简代码中<a-asset-item>的response-type="arraybuffer"会干扰A-Frame对GLB的自动解析，建议移除：

<a-asset-item id="leopard" src="/assets/models/leopard.glb"></a-asset-item>

3. 验证模型的可见性基础条件 #

模型可能因尺寸、位置问题处于相机视锥体之外，添加基础灯光和相机调整后测试：

<a-scene>
  <a-assets>
    <a-asset-item id="leopard" src="/assets/models/leopard.glb"></a-asset-item>
  </a-assets>
  <a-camera position="0 1 5"></a-camera>
  <a-light type="ambient" intensity="1"></a-light>
  <a-light type="directional" position="5 5 5" intensity="1"></a-light>
  <a-entity gltf-model="#leopard" scale="0.1 0.1 0.1"></a-entity>
</a-scene>

同时可通过浏览器开发者工具（F12）的Three.js Inspector查看模型Mesh是否存在、位置与缩放是否正常。

4. 检查GLB文件完整性 #

用glTF Validator工具本地检查GLB文件，排查材质、纹理相关警告或错误：

• 确认纹理格式符合Three.js支持标准（避免使用未兼容的压缩纹理格式）；
• 若模型使用Draco压缩，需在gltf-model组件中正确指定解码器路径：

  <a-entity gltf-model="src: #leopard; dracoDecoderPath: /path/to/draco/decoders/"></a-entity>
  

5. 规范Blender导出设置 #

导出GLB时确保以下选项配置正确：

• 勾选「Selected Objects」（仅导出目标模型）；
• 取消「Export Cameras」「Export Lights」（避免与A-Frame内置相机灯光冲突）；
• 勾选「Export Textures」（若纹理嵌入GLB，或确保纹理文件与GLB在同一目录）；
• 选择「GLB」单文件格式，优先于分离式GLTF。

6. 用Three.js原生加载测试 #

编写简单的Three.js原生加载代码，排除A-Frame封装层的问题：

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5,5,5);
scene.add(directionalLight);

const loader = new GLTFLoader();
loader.load('/assets/models/leopard.glb', function(gltf) {
  scene.add(gltf.scene);
  gltf.scene.scale.set(0.1,0.1,0.1);
});

camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

若此测试中模型正常显示，问题则出在A-Frame配置；若仍变黑，需聚焦模型本身或Three.js支持问题。

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