Three.js + Vue3 加载GLB模型项目代码详解

本说明结合 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