Three.js网页中GLB模型无法显示问题求助

场景、网格均已正常显示，已将GLB文件coffeeshop.glb放在main.ts同目录下，排除路径问题，但模型仍无法显示。

以下是main.ts代码：

const scene = new THREE.Scene();
// scene.background = new THREE.Color(0xffc0cb)
scene.background = new THREE.Color(0x000000)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 1, 5)

const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

const container = document.getElementById("container3D");
if (!container) {
    console.error("Container element 'container3D' not found!");
} else {
    container.appendChild(renderer.domElement);
}

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

const glbLoader = new GLTFLoader();

glbLoader.load('coffeeshop.glb', (gltf) => {
    const coffee = gltf.scene;
    coffee.traverse((child) => {
        if ((child as THREE.Mesh).isMesh) {
            (child as THREE.Mesh).geometry.center();
        }
    });
    scene.add(coffee)

})

function animate() {
    requestAnimationFrame(animate);
    controls.update(); // required if controls.enableDamping = true
    renderer.render(scene, camera);
}

animate();

1. 排查模型加载错误 #

给GLB加载器加上错误回调，直接在控制台查看加载失败原因：

glbLoader.load(
  'coffeeshop.glb',
  (gltf) => {
    // 现有成功逻辑
  },
  (xhr) => {
    console.log(`加载进度：${(xhr.loaded / xhr.total * 100)}%`);
  },
  (error) => {
    console.error('模型加载失败:', error);
  }
);

打开浏览器控制台（F12），重点看是否有跨域、文件损坏、格式不兼容这类报错。

2. 检查模型的位置与缩放 #

模型没显示大概率是尺寸异常或不在相机视野内：

• 先去掉(child as THREE.Mesh).geometry.center()，这个操作会重置单个网格的中心，若模型本身有层级结构，可能导致整体位置错乱。
• 加载后打印模型的边界信息，确认它在相机可见范围内：

const coffee = gltf.scene;
scene.add(coffee);
const box = new THREE.Box3().setFromObject(coffee);
console.log('模型边界:', box);
console.log('模型中心:', box.getCenter(new THREE.Vector3()));
console.log('模型尺寸:', box.getSize(new THREE.Vector3()));

如果模型尺寸过大/过小，手动调整缩放：

coffee.scale.set(0.1, 0.1, 0.1); // 根据实际尺寸调整数值

或者临时拉远相机位置，比如camera.position.set(0, 1, 20)，测试能否看到模型。

3. 补充光照 #

当前仅用了强度为0.5的环境光，可能导致模型材质过暗无法分辨。添加方向光增强亮度：

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

4. 确认依赖导入正确 #

检查OrbitControls和GLTFLoader是否正确导入，TS环境下需要：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

若未正确导入，控制台会出现xxx is not defined的报错。

5. 测试替换模型 #

用Three.js官方示例的GLB模型替换coffeeshop.glb，排查是否是模型文件本身损坏或格式问题。

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