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