Vue3 + Three.js 极速入门：打造你的第一个3D可视化项目

---

前言

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. 挂载到DOM
  canvasContainer.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.01
  cube.rotation.y += 0.01
  
  renderer.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.innerHeight
  camera.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进行状态管理