在Playcode.io中使用Three.js加载GLTF模型失败的问题求助

看起来你已经做了不少基础准备工作，但黑屏确实是Three.js加载3D模型时很常见的小问题，咱们一步步来排查可能的原因：

• 相机位置没调整，被模型挡住了
  默认情况下Three.js的相机是放在坐标原点(0, 0, 0)的，如果你的plane模型也在原点，相机就相当于“钻进”了模型内部，自然看不到任何东西。试试给相机往后挪一段距离：

  // 在创建camera之后添加这行代码
  camera.position.z = 5;
  

• 场景缺少光照，模型无法被照亮
  Three.js的场景默认是没有任何光源的，如果你的GLTF模型材质不是自发光类型，就会因为没有光照而呈现全黑状态。给场景添加基础光源试试：

  // 在创建scene之后添加
  // 环境光：照亮场景所有角落
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);
  // 平行光：模拟太阳光，增强立体感
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(5, 5, 5);
  scene.add(directionalLight);
  

• 模型路径或资源不完整
  确认plane.gltf文件确实放在了Playcode项目的根目录下，和main.js处于同一层级。另外有些GLTF模型会附带.bin二进制文件或者纹理图片，这些文件必须和.gltf文件一起上传到项目中，否则会加载失败。你可以打开浏览器的开发者工具（F12），切换到Console面板看看有没有资源加载失败的报错（比如404）。

• 模型尺寸或位置异常
  有些GLTF模型可能尺寸过大或者位置偏移，导致超出了相机的可视范围。可以在加载模型后添加一段代码，查看模型的包围盒信息，方便调整：

  loader.load( 'plane.gltf', function ( gltf ) {
      const model = gltf.scene;
      scene.add( model );
      // 计算模型的包围盒，查看中心位置和尺寸
      const boundingBox = new THREE.Box3().setFromObject(model);
      const modelCenter = boundingBox.getCenter(new THREE.Vector3());
      const modelSize = boundingBox.getSize(new THREE.Vector3());
      console.log('模型中心坐标:', modelCenter);
      console.log('模型尺寸:', modelSize);
      // 可选：把模型移到原点，方便观察
      model.position.sub(modelCenter);
  }, undefined, function ( error ) {
      console.error( error );
  } );
  

先从调整相机位置和添加光照这两个最常见的原因入手试试，这两个解决后大概率能看到模型。如果还是不行，再检查资源路径和模型本身的问题~

备注：内容来源于stack exchange，提问作者bingandabong