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';
// 導(dǎo)入 FBX 模型加載器
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
// 導(dǎo)入 GLTF 模型加載器
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

export default {
  name: 'ThreeModelLoader',
  data() {
    return {
      scene: null, // Three.js 場景對象
      camera: null, // 相機(jī)對象
      renderer: null, // 渲染器對象
      controls: null, // 相機(jī)控制器對象
      fbxModel: null, // 存儲加載的 FBX 模型
      glbModel: null, // 存儲加載的 GLB 模型
    };
  },
  mounted() {
    this.initThree(); // 初始化 Three.js 場景
    this.loadFBXModel(); // 加載 FBX 模型
    this.loadGLBModel(); // 加載 GLB 模型
    this.animate(); // 啟動動畫循環(huán)
  },
  methods: {
    initThree() {
      // 創(chuàng)建場景
      this.scene = new THREE.Scene();

      // 創(chuàng)建透視相機(jī)
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / 600, 0.1, 1000);
      this.camera.position.z = 5;

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

      // 創(chuàng)建軌道控制器，方便用戶交互
      const OrbitControls = require('three/addons/controls/OrbitControls.js').OrbitControls;
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);

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

      // 添加平行光，增強(qiáng)場景的立體感
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(1, 1, 1);
      this.scene.add(directionalLight);

      // 監(jiān)聽窗口大小變化，更新相機(jī)和渲染器
      window.addEventListener('resize', this.onWindowResize);
    },
    loadFBXModel() {
      const loader = new FBXLoader();
      // 替換為你的 FBX 模型文件路徑
      loader.load('/path/to/your/model.fbx', (object) => {
        this.fbxModel = object;
        // 設(shè)置模型的位置
        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;
        // 設(shè)置模型的位置
        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() {
      // 更新相機(jī)的投影矩陣
      this.camera.aspect = window.innerWidth / 600;
      this.camera.updateProjectionMatrix();

      // 更新渲染器的大小
      this.renderer.setSize(window.innerWidth, 600);
    },
  },
  beforeDestroy() {
    // 移除窗口大小變化的監(jiān)聽器
    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