本說明結合 src/App.vue 代碼，詳細解釋如何在 Vue3 項目中用 three.js 加載并顯示 glb 模型。
1. 依賴與插件導入
import { onMounted, onUnmounted } from 'vue'
import * as THREE from 'three'
import Stats from 'stats.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
- THREE：three.js 主庫，包含所有核心3D功能。
- Stats：性能監控面板，顯示FPS等信息。
- OrbitControls：鼠標/觸摸控制相機旋轉、縮放、平移。
- RoomEnvironment：生成物理渲染用的環境貼圖。
- GLTFLoader/DRACOLoader：加載glb/gltf模型及解壓Draco壓縮網格。
2. 變量聲明
let mixer: THREE.AnimationMixer | undefined
let renderer: THREE.WebGLRenderer
let controls: OrbitControls
let stats: Stats
const clock = new THREE.Clock()
- mixer：動畫混合器，用于播放模型動畫。
- renderer：WebGL渲染器。
- controls：軌道控制器。
- stats：性能監控。
- clock：three.js動畫計時器。
3. Vue生命周期掛載
onMounted(() => { ... })
onUnmounted(() => { ... })
- onMounted：組件掛載后初始化three.js場景。
- onUnmounted：組件卸載時清理資源，防止內存泄漏。
4. three.js 場景初始化
4.1 獲取容器
const container = document.getElementById('container')
- 獲取用于渲染three.js的DOM節點。
4.2 性能面板
stats = new Stats()
container.appendChild(stats.dom)
- 添加FPS性能監控面板。
4.3 渲染器
renderer = new THREE
)
