Three.js FBXLoader示例机器人模型获取及Angular6加载Mixamo模型不显示求助

要拿到这个示例里的机器人模型，有两种简单可行的方法：

• 通过浏览器开发者工具抓取：

  1. 打开示例页面后，按下F12打开开发者工具，切换到「Network」面板
  2. 在筛选框输入fbx，刷新页面，就能看到模型文件的请求条目
  3. 右键这个条目，选择「复制链接地址」，然后在新标签页打开该地址，浏览器会自动下载模型文件

• 从Three.js源码仓库获取：
  去Three.js的GitHub仓库，找到examples/models/fbx目录，里面存放着官方示例用到的所有FBX模型，你要的桑巴机器人模型就在这个目录里。

这种情况通常是模型的缩放、相机位置、光照或者渲染流程出了问题，给你几个排查和解决的方向：

• 调整模型缩放比例：
  Mixamo导出的模型有时候缩放比例会特别大，导致模型超出相机视口，或者小到看不见。加载完成后试试调整缩放：

  object.scale.set(0.05, 0.05, 0.05); // 数值可以根据实际情况调整，比如0.1、0.01
  

• 检查相机位置与视角：
  很可能相机处于模型内部，所以只能看到模型的内部颜色。试试把相机往后移动，并且让相机对准模型：

  camera.position.set(0, 1, 5); // 调整z轴数值，往后拉远
  camera.lookAt(object.position); // 让相机看向模型中心
  

• 添加必要的光照：
  Mixamo模型的材质依赖光照才能正确显示，默认场景如果没有光照，可能只会显示纯色块。在场景中添加环境光和方向光：

  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);
  

• 确保模型在视口中心：
  有些模型加载后位置不在场景原点，导致超出相机视野。手动把模型移到原点：

  object.position.set(0, 0, 0);
  

• 验证渲染循环是否正常运行：
  在Angular中，你需要确保用requestAnimationFrame持续渲染场景，比如在组件的ngAfterViewInit里设置：

  private animate(): void {
    requestAnimationFrame(() => this.animate());
    this.renderer.render(this.scene, this.camera);
    // 如果用了AnimationMixer，还要更新mixer
    if (this.mixer) {
      this.mixer.update(0.01);
    }
  }
  

• 确认FBXLoader的加载流程正确：
  确保模型加载完成后再添加到场景，避免异步加载导致的问题：

  const loader = new FBXLoader();
  loader.load('path/to/your/model.fbx', (object) => {
    // 这里处理模型的缩放、位置等
    object.scale.set(0.05, 0.05, 0.05);
    object.position.set(0, 0, 0);
    this.scene.add(object);
    // 初始化AnimationMixer
    this.mixer = new THREE.AnimationMixer(object);
    const action = this.mixer.clipAction(object.animations[0]);
    action.play();
  });
  

你可以逐个排查这些点，大概率能解决看不到模型的问题。

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