Vue中使用Three.js引入模型格式(.fbx、.glb)的实现步骤

npm install -g @vue/cli

vue create threejs-vue-model-loader
cd threejs-vue-model-loader

npm install three

<template>
  <!-- 用于渲染 Three.js 场景的容器 -->
  <div ref="container" style="width: 100%; height: 600px;"></div>
</template>

<script>
import * as THREE from 'three';
// 导入 FBX 模型加载器
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
// 导入 GLTF 模型加载器
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

export default {
  name: 'ThreeModelLoader',
  data() {
    return {
      scene: null, // Three.js 场景对象
      camera: null, // 相机对象
      renderer: null, // 渲染器对象
      controls: null, // 相机控制器对象
      fbxModel: null, // 存储加载的 FBX 模型
      glbModel: null, // 存储加载的 GLB 模型
    };
  },
  mounted() {
    this.initThree(); // 初始化 Three.js 场景
    this.loadFBXModel(); // 加载 FBX 模型
    this.loadGLBModel(); // 加载 GLB 模型
    this.animate(); // 启动动画循环
  },
  methods: {
    initThree() {
      // 创建场景
      this.scene = new THREE.Scene();

      // 创建透视相机
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / 600, 0.1, 1000);
      this.camera.position.z = 5;

      // 创建渲染器
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, 600);
      // 将渲染器的 DOM 元素添加到容器中
      this.$refs.container.appendChild(this.renderer.domElement);

      // 创建轨道控制器，方便用户交互
      const OrbitControls = require('three/addons/controls/OrbitControls.js').OrbitControls;
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);

      // 添加环境光，使场景更明亮
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      this.scene.add(ambientLight);

      // 添加平行光，增强场景的立体感
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(1, 1, 1);
      this.scene.add(directionalLight);

      // 监听窗口大小变化，更新相机和渲染器
      window.addEventListener('resize', this.onWindowResize);
    },
    loadFBXModel() {
      const loader = new FBXLoader();
      // 替换为你的 FBX 模型文件路径
      loader.load('/path/to/your/model.fbx', (object) => {
        this.fbxModel = object;
        // 设置模型的位置
        this.fbxModel.position.set(-2, 0, 0);
        this.scene.add(this.fbxModel);
      }, undefined, (error) => {
        console.error('FBX 模型加载失败:', error);
      });
    },
    loadGLBModel() {
      const loader = new GLTFLoader();
      // 替换为你的 GLB 模型文件路径
      loader.load('/path/to/your/model.glb', (gltf) => {
        this.glbModel = gltf.scene;
        // 设置模型的位置
        this.glbModel.position.set(2, 0, 0);
        this.scene.add(this.glbModel);
      }, undefined, (error) => {
        console.error('GLB 模型加载失败:', error);
      });
    },
    animate() {
      // 请求下一帧动画
      requestAnimationFrame(this.animate);

      // 更新控制器
      this.controls.update();

      // 渲染场景
      this.renderer.render(this.scene, this.camera);
    },
    onWindowResize() {
      // 更新相机的投影矩阵
      this.camera.aspect = window.innerWidth / 600;
      this.camera.updateProjectionMatrix();

      // 更新渲染器的大小
      this.renderer.setSize(window.innerWidth, 600);
    },
  },
  beforeDestroy() {
    // 移除窗口大小变化的监听器
    window.removeEventListener('resize', this.onWindowResize);
    // 销毁控制器
    this.controls.dispose();
    // 销毁渲染器
    this.renderer.dispose();
    // 移除场景中的模型
    if (this.fbxModel) {
      this.scene.remove(this.fbxModel);
    }
    if (this.glbModel) {
      this.scene.remove(this.glbModel);
    }
  },
};
</script>

<style scoped>
/* 可以添加一些样式 */
</style>

<template>
  <div id="app">
    <ThreeModelLoader />
  </div>
</template>

<script>
import ThreeModelLoader from './components/ThreeModelLoader.vue';

export default {
  name: 'App',
  components: {
    ThreeModelLoader,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

npm run serve