Angular中Three.js用GLTFLoader加载模型不显示且报center未定义错误

看起来你遇到的问题是GLTFLoader已经报告加载完成，但模型没显示，还触发了Cannot read property 'center' of undefined的错误——这个错误根源很明确：你的Mesh几何体没有正确初始化boundingSphere，导致Raycaster在执行碰撞检测时调用Sphere.copy()找不到所需的属性。

下面是一步步的排查和解决方法：

1. 先修复Raycaster报错的核心问题 #

错误发生在Mesh.raycast阶段，说明当Raycaster尝试检测对象时，某个Mesh的geometry.boundingSphere是undefined。解决这个问题很简单，在模型加载完成后，遍历所有Mesh并手动计算包围球：

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

// 假设这是你的Angular组件中的加载逻辑
loadCubeModel() {
  const loader = new GLTFLoader();
  loader.load('/assets/your-cube-model.gltf', (gltf) => {
    // 遍历模型树中的所有Mesh
    gltf.scene.traverse(child => {
      if (child.isMesh) {
        // 强制计算几何体的包围球和包围盒，避免后续检测报错
        child.geometry.computeBoundingSphere();
        child.geometry.computeBoundingBox();
      }
    });
    
    // 将整个模型场景添加到你的Three.js场景中
    this.scene.add(gltf.scene);
    console.log('模型已成功加入场景');
  }, (progress) => {
    console.log(`加载进度: ${Math.round(progress.loaded/progress.total*100)}%`);
  }, (err) => {
    console.error('模型加载失败:', err);
  });
}

2. 排查模型不显示的常见原因 #

加载完成但看不到模型，通常和以下几点有关：

• 是否正确添加模型到场景：一定要添加gltf.scene而不是gltf对象本身，很多新手会在这里踩坑。
• 相机位置是否合理：如果相机离模型太远或者朝向不对，自然看不到。可以尝试重置相机位置并让它看向模型：

  this.camera.position.set(0, 0, 10);
  this.camera.lookAt(gltf.scene.position);
  

• 灯光是否配置正确：没有灯光的话模型会是纯黑色，看起来像没显示。添加基础灯光试试：

  // 环境光（照亮整个场景）
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  this.scene.add(ambientLight);
  // 方向光（模拟太阳光）
  const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
  dirLight.position.set(5, 5, 5);
  this.scene.add(dirLight);
  

• 模型本身是否损坏：可以用Three.js官方编辑器导入你的GLTF模型，看是否能正常显示，排除模型导出的问题。

3. 避免Raycaster在模型未就绪时执行检测 #

如果你的animate函数里一直在执行Raycast检测，可能在模型还没加载完成、几何体还没计算包围球的时候就触发了检测。可以加一个加载状态标志位，确保只有模型加载完成后才执行Raycast：

private isModelLoaded = false;

// 在模型加载完成的回调中设置：
// this.isModelLoaded = true;

animate() {
  requestAnimationFrame(() => this.animate());

  // 仅当模型加载完成后才执行碰撞检测
  if (this.isModelLoaded) {
    this.raycaster.setFromCamera(this.mousePosition, this.camera);
    const intersects = this.raycaster.intersectObjects(this.scene.children, true);
    // 你的碰撞检测后续逻辑...
  }

  this.renderer.render(this.scene, this.camera);
}

按照上面的步骤逐一排查，应该能同时解决模型不显示和Raycaster报错的问题。

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