Three.js中GLB模型无法加载显示问题求助

核心问题排查（按概率排序） #

1. 文件路径/访问方式错误 #

• 问题本质：直接双击打开HTML文件时，浏览器用file://协议加载，会限制本地文件读取；或者你拼写错了GLB文件名（比如大小写、后缀名）。
• 修复：
  • 用本地服务器运行项目：打开终端，进入项目目录，执行npx serve（需安装Node.js），访问终端给出的本地地址（如http://localhost:3000）。
  • 核对GLB文件名：确保代码里的文件名和实际文件完全一致，比如model.glb不能写成Model.glb或model.GLB。

2. 场景没有光源 #

• 问题本质：Three.js场景默认全黑，GLB模型本身不会发光，没有光源的话，模型加载了也看不到。
• 修复：在场景初始化后添加基础光源：

// 环境光：照亮整个场景，避免死角
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);
scene.add(directionalLight);

3. 模型尺寸/位置异常 #

• 问题本质：GLB模型的原始尺寸可能过大（超出相机视野）、过小（缩成点），或者位置在相机背后，导致看不到。
• 修复：加载模型后自动调整尺寸和位置：

loader.load('model.glb', function(gltf) {
  const model = gltf.scene;
  // 把模型放到场景中心
  model.position.set(0, 0, 0);
  // 自动缩放模型到适合相机观看的大小（最大边限制为5）
  const box = new THREE.Box3().setFromObject(model);
  const size = box.getSize(new THREE.Vector3());
  const maxSize = Math.max(size.x, size.y, size.z);
  const scale = 5 / maxSize;
  model.scale.setScalar(scale);
  scene.add(model);
});

完整修复后代码示例 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Three.js GLB Test</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js';
    import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/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, 0.6);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(5, 10, 7.5);
    scene.add(directionalLight);

    // 加载并调整模型
    const loader = new GLTFLoader();
    loader.load(
      'model.glb', // 替换成你的GLB文件名
      function(gltf) {
        const model = gltf.scene;
        model.position.set(0, 0, 0);
        // 自动缩放
        const box = new THREE.Box3().setFromObject(model);
        const size = box.getSize(new THREE.Vector3());
        const maxSize = Math.max(size.x, size.y, size.z);
        const scale = 5 / maxSize;
        model.scale.setScalar(scale);
        scene.add(model);
      },
      undefined,
      function(error) {
        // 打印错误信息，方便排查
        console.error('模型加载失败：', error);
      }
    );

    // 调整相机位置（确保能看到模型）
    camera.position.z = 10;

    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>

额外排查技巧 #

• 打开浏览器控制台（F12），查看报错：如果是404，就是路径错误；如果是其他加载错误，可能是GLB文件损坏。
• 可以先加载官方测试模型（比如把model.glb换成https://threejs.org/examples/models/gltf/Duck/glTF/Duck.glb），验证加载器是否正常。

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