Vue3 + Three.js 入门教程：从零构建3D可视化应用-平芜编程栈

1. 前言：为什么选择 Vue3 + Three.js？

Three.js 是目前最流行的 Web 3D 图形库，而 Vue3 以其优秀的响应式系统和组合式 API 成为现代前端开发的首选框架之一。将两者结合，可以让我们在 Vue 的组件化开发模式下，轻松创建交互式 3D 可视化应用。本教程将带你从零开始，一步步搭建一个基础的 Vue3 + Three.js 项目。

2. 环境准备与项目创建

2.1 安装 Node.js 与 Vue CLI

确保你的系统已安装 Node.js（建议版本 16+）。然后通过 npm 全局安装 Vue CLI：

npm install -g @vue/cli

2.2 创建 Vue3 项目

使用 Vue CLI 创建一个新的 Vue3 项目：

vue create vue-three-demo

在提示中选择Vue 3预设，并按照指引完成项目创建。

2.3 安装 Three.js 依赖

进入项目目录，安装 Three.js：

cd vue-three-demo npm install three

3. 第一个 3D 场景：旋转的立方体

3.1 创建 Three.js 组件

在src/components目录下创建ThreeScene.vue文件：

<template> <div ref="container" class="three-container"></div> </template> <script setup> import { ref, onMounted, onUnmounted } from 'vue' import * as THREE from 'three' const container = ref(null) // 场景、相机、渲染器 let scene, camera, renderer // 立方体 let cube onMounted(() => { init() animate() }) onUnmounted(() => { // 清理资源 if (renderer) { renderer.dispose() } }) const init = () => { // 1. 创建场景 scene = new THREE.Scene() scene.background = new THREE.Color(0x87ceeb) // 天空蓝背景 // 2. 创建相机（透视相机） camera = new THREE.PerspectiveCamera( 75, // 视野角度 container.value.clientWidth / container.value.clientHeight, // 宽高比 0.1, // 近截面 1000 // 远截面 ) camera.position.z = 5 // 3. 创建渲染器 renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(container.value.clientWidth, container.value.clientHeight) container.value.appendChild(renderer.domElement) // 4. 创建立方体几何体 const geometry = new THREE.BoxGeometry(1, 1, 1) // 5. 创建基础材质（绿色） const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }) // 6. 创建网格（物体） cube = new THREE.Mesh(geometry, material) scene.add(cube) // 7. 添加环境光（非必须，BasicMaterial 不需要光照） // const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) // scene.add(ambientLight) } const animate = () => { requestAnimationFrame(animate) // 让立方体旋转 if (cube) { cube.rotation.x += 0.01 cube.rotation.y += 0.01 } // 渲染场景 renderer.render(scene, camera) } </script> <style scoped> .three-container { width: 100%; height: 500px; border: 1px solid #ccc; } </style>

3.2 在主页面中使用组件

修改src/App.vue：

<template> <div id="app"> <h1>Vue3 + Three.js 入门示例</h1> <ThreeScene /> </div> </template> <script setup> import ThreeScene from './components/ThreeScene.vue' </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; margin-top: 20px; } </style>

3.3 运行项目

npm run serve

打开浏览器访问http://localhost:8080，你将看到一个绿色立方体在蓝色背景中缓缓旋转。

4. 核心概念解析

4.1 Three.js 三大核心对象

场景（Scene）：所有 3D 对象的容器，相当于一个舞台。
相机（Camera）：观察场景的视角，决定了最终渲染到屏幕上的画面。
渲染器（Renderer）：将场景和相机结合，绘制出最终的 2D 图像到 Canvas 上。

4.2 几何体、材质与网格

几何体（Geometry）：定义物体的形状（如立方体、球体）。
材质（Material）：定义物体的外观（如颜色、纹理、反光度）。
网格（Mesh）：将几何体和材质结合，形成一个可以在场景中显示和操作的物体。

4.3 动画循环

使用requestAnimationFrame创建动画循环，在每一帧更新物体状态（如旋转、位移）并重新渲染场景。

5. 进阶：添加交互与光照

5.1 更换为受光照影响的材质

将MeshBasicMaterial改为MeshPhongMaterial，并添加光源：

// 在 init 函数中替换材质和添加光源 const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }) // 添加平行光 const directionalLight = new THREE.DirectionalLight(0xffffff, 1) directionalLight.position.set(1, 1, 1) scene.add(directionalLight) // 添加环境光 const ambientLight = new THREE.AmbientLight(0x404040) scene.add(ambientLight)

5.2 添加轨道控制器（鼠标交互）

安装轨道控制器库：

npm install three-orbitcontrols

在组件中引入并使用：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' // 在 init 函数中，创建渲染器后添加 const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true // 启用阻尼（惯性效果） controls.dampingFactor = 0.05

并在animate函数中更新控制器：