如何使用ThreeJS加载FBX/OBJ格式3D文件替换场景立方体？

你说得没错，加载FBX和OBJ格式的3D文件确实需要使用ThreeJS专门的加载器，下面我会基于你提供的Angular代码，一步步教你完成替换：

第一步：导入对应的加载器 #

ThreeJS的FBX和OBJ加载器都在three/examples/jsm/loaders目录下，你需要先在你的.ts文件顶部导入它们：

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
// 若OBJ模型带配套材质文件（.mtl），还需导入MTLLoader
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
// 别忘了OrbitControls也要导入
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

第二步：替换createMesh方法 #

把原来创建立方体的createMesh方法，替换成加载FBX或OBJ模型的代码：

情况1：加载FBX模型 #

createMesh() {
  // 初始化FBX加载器
  const fbxLoader = new FBXLoader();
  // 加载你的FBX文件（路径示例：若放在assets目录下则为'./assets/image.fbx'）
  fbxLoader.load('./path/to/your/image.fbx', (model) => {
    // 根据模型实际大小调整缩放比例
    model.scale.set(0.1, 0.1, 0.1);
    model.position.set(0, 0, 0);
    this.mesh = model;
    this.scene.add(this.mesh);
    
    // 可选：若模型无自带材质，手动添加基础材质
    // model.traverse((child) => {
    //   if (child instanceof THREE.Mesh) {
    //     child.material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
    //   }
    // });
  }, 
  // 加载进度回调（可选）
  (xhr) => {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  // 加载错误回调（可选）
  (error) => {
    console.error('FBX模型加载失败:', error);
  });
}

情况2：加载OBJ模型（带/不带材质） #

如果你的OBJ模型有对应的.mtl材质文件，需要先加载材质再加载模型：

createMesh() {
  // 先加载MTL材质文件
  const mtlLoader = new MTLLoader();
  mtlLoader.load('./path/to/your/image.mtl', (materials) => {
    materials.preload();
    // 初始化OBJ加载器并关联材质
    const objLoader = new OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.load('./path/to/your/image.obj', (model) => {
      // 调整模型缩放与位置
      model.scale.set(1, 1, 1);
      model.position.set(0, 0, 0);
      this.mesh = model;
      this.scene.add(this.mesh);
    },
    (xhr) => {
      console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    (error) => {
      console.error('OBJ模型加载失败:', error);
    });
  });

  // 若没有MTL材质，直接加载OBJ即可：
  // const objLoader = new OBJLoader();
  // objLoader.load('./path/to/your/image.obj', (model) => {
  //   model.scale.set(1,1,1);
  //   this.scene.add(model);
  // });
}

第三步：关键注意事项 #

• 文件路径：确保FBX/OBJ文件放在Angular可访问的目录（比如assets文件夹），路径填写错误会导致加载失败。
• 模型适配：不同3D模型的尺寸差异极大，加载后如果看不到模型，优先调整scale缩放比例，或修改相机的position参数。
• 版本兼容：确保你的ThreeJS是最新稳定版，避免加载器API不兼容问题，可通过npm install three --save更新。

这样修改后，运行项目就能看到替换后的3D模型了，如果遇到问题，可通过浏览器控制台查看错误信息，排查路径或文件格式问题~

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