---

前言

Three.js 作为强大的 WebGL 库，配合 Vue3 的响应式特性，能轻松创建交互式3D可视化应用。本文将通过20分钟快速入门，带你掌握 Vue3 与 Three.js 的整合技巧，并提供可运行的代码示例。

• threejs官网：https://threejs.org/
• Threejs官网中文文档：https://threejs.org/docs/index.html#manual/zh/
• threejs中文网：http://www.webgl3d.cn/
• threejs基础教程：http://www.webgl3d.cn/pages/aac9ab/
• webgl基础教程：http://www.webgl3d.cn/pages/9bc0db/
• threejs数学几何计算：http://www.webgl3d.cn/pages/001888/
• threejs shader：http://www.webgl3d.cn/pages/d30795/
• blender基础：http://www.webgl3d.cn/pages/00cfc0/

---

一、环境准备

1.1 创建Vue3项目

npm create vue@latest
# 选择默认配置
cd your-project
npm install

1.2 安装Three.js

npm install three @types/three

二、Three.js核心概念速览

概念	作用	Vue3对应思路
Scene	3D场景容器	组件容器
Camera	观察视角	响应式坐标
Renderer	渲染器	Canvas DOM绑定
Geometry	几何形状	数据驱动
Material	材质外观	响应式样式
Mesh	几何体+材质的可渲染对象	动态组件

三、实战：创建旋转立方体

3.1 组件化初始化

<template><div ref="canvasContainer" class="canvas-container"></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as THREE from 'three'const canvasContainer = ref(null)
let scene, camera, renderer, cube// 初始化场景
function initScene() {// 1. 创建场景scene = new THREE.Scene()// 2. 创建相机（透视相机）camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.1,1000)camera.position.z = 5// 3. 创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(window.innerWidth, window.innerHeight)// 4. 挂载到DOMcanvasContainer.value.appendChild(renderer.domElement)
}// 创建立方体
function createCube() {const geometry = new THREE.BoxGeometry(1, 1, 1)const material = new THREE.MeshBasicMaterial({ color: 0x00ff00,wireframe: true })cube = new THREE.Mesh(geometry, material)scene.add(cube)
}// 动画循环
function animate() {requestAnimationFrame(animate)cube.rotation.x += 0.01cube.rotation.y += 0.01renderer.render(scene, camera)
}onMounted(() => {initScene()createCube()animate()
})// 组件卸载时清理资源
onUnmounted(() => {if (renderer) {renderer.dispose()canvasContainer.value.removeChild(renderer.domElement)}
})
</script><style>
.canvas-container {width: 100vw;height: 100vh;margin: 0;overflow: hidden;
}
</style>

四、核心代码解析

4.1 Vue3响应式整合技巧

• 使用 ref 绑定DOM容器
• 在 onMounted 生命周期初始化 Three.js
• 通过 requestAnimationFrame 实现流畅动画
• onUnmounted 中执行资源清理

4.2 性能优化要点

// 窗口大小自适应
window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)
})

五、进阶功能扩展

5.1 数据驱动控制

<script setup>
import { ref } from 'vue'const cubeColor = ref('#00ff00')// 监听颜色变化
watch(cubeColor, (newVal) => {cube.material.color.set(newVal)
})
</script><template><input type="color" v-model="cubeColor">
</template>

5.2 加载3D模型

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'const loader = new GLTFLoader()
loader.load('model.glb', (gltf) => {scene.add(gltf.scene)
})

六、常见问题解决

Q1：页面出现多个canvas叠加‌
✅ 在 onUnmounted 中确保移除 DOM 节点

Q2：物体显示黑色‌
✅ 检查材质类型是否需要添加灯光

Q3：内存泄漏‌
✅ 显式清理 geometry 和 material ：

geometry.dispose()
material.dispose()

七、资源推荐

• Three.js官方文档
• Vue3组合式API指南
• Three.js案例库

八、结语🌟

通过本文的实践，你已经掌握了 Vue3 与 Three.js 整合的基本方法。后续可继续探索：

• 添加交互控制（鼠标旋转/缩放）
• 实现复杂材质效果
• 结合Vuex进行状态管理