---

前言

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進行狀態管理