Three.js中GLTF模型与纹理加载成功但模型无法显示问题求助

结合你提供的代码，以下是几个可能导致模型无法显示的问题及解决方法：

• 环境光颜色值无效：你定义的颜色0x11111不符合十六进制颜色的6位格式（RRGGBB），会被解析为无效颜色，导致场景光照不足。修正为0x111111即可：

  const color = 0x111111;
  

• 仅执行单次渲染：模型加载完成后只调用了一次renderer.render()，Three.js需要通过动画循环持续渲染才能保证场景内容正常显示。添加以下循环渲染代码，替换回调里的单次渲染：

  function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
  }
  animate();
  

  将这段代码放在初始化代码的末尾即可。

• 相机宽高比与渲染器尺寸不匹配：相机宽高比使用了window.innerWidth / window.innerHeight，但渲染器固定为500x500，会导致场景内容拉伸或模型被挤出视口。让相机宽高比匹配渲染器尺寸：

  const renderSize = 500;
  const camera = new THREE.PerspectiveCamera(75, renderSize / renderSize, 0.1, 1000);
  

• Canvas元素引用未定义：渲染器初始化时使用了canvas: eddie，但代码中未定义eddie变量。如果HTML中存在id为eddie的canvas元素，先获取它：

  const eddieCanvas = document.getElementById('eddie');
  const renderer = new THREE.WebGLRenderer({ canvas: eddieCanvas });
  

  若没有该元素，直接移除canvas配置项，让渲染器自动创建canvas即可。

• 模型位置与尺寸适配问题：可能模型本身尺寸过大或原点不在相机可视范围内。加载模型后添加边界盒辅助工具，直观查看模型范围并调整相机：

  loader.load('./models/eddieFinal.gltf', function (gltf) {
      let eddie = scene.add(gltf.scene);
      eddie.scale.set(1, 1, 1);
      // 添加黄色边界盒辅助
      const box = new THREE.Box3().setFromObject(eddie);
      const boxHelper = new THREE.Box3Helper(box, 0xffff00);
      scene.add(boxHelper);
      // 自动调整相机位置以适配模型
      const center = box.getCenter(new THREE.Vector3());
      const size = box.getSize(new THREE.Vector3());
      const maxDim = Math.max(size.x, size.y, size.z);
      const fov = camera.fov * (Math.PI / 180);
      let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
      camera.position.z = cameraZ;
      camera.lookAt(center);
  }, undefined, function (error) {
      console.error(error);
  });
  

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