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

1. 前言为什么选择 Vue3 Three.jsThree.js 是目前最流行的 Web 3D 图形库而 Vue3 以其优秀的响应式系统和组合式 API 成为现代前端开发的首选框架之一。将两者结合可以让我们在 Vue 的组件化开发模式下轻松创建交互式 3D 可视化应用。本教程将带你从零开始一步步搭建一个基础的 Vue3 Three.js 项目。2. 环境准备与项目创建2.1 安装 Node.js 与 Vue CLI确保你的系统已安装 Node.js建议版本 16。然后通过 npm 全局安装 Vue CLInpm install -g vue/cli2.2 创建 Vue3 项目使用 Vue CLI 创建一个新的 Vue3 项目vue create vue-three-demo在提示中选择Vue 3预设并按照指引完成项目创建。2.3 安装 Three.js 依赖进入项目目录安装 Three.jscd vue-three-demo npm install three3. 第一个 3D 场景旋转的立方体3.1 创建 Three.js 组件在src/components目录下创建ThreeScene.vue文件template div refcontainer classthree-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; } /style3.2 在主页面中使用组件修改src/App.vuetemplate div idapp h1Vue3 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; } /style3.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函数中更新控制器controls.update()现在你可以用鼠标拖拽旋转视角滚轮缩放场景。6. 性能优化与资源清理组件卸载时清理在onUnmounted中调用renderer.dispose()释放 WebGL 资源。响应式尺寸监听窗口大小变化更新相机和渲染器尺寸。使用 BufferGeometry对于复杂模型使用BufferGeometry性能更好。按需渲染静态场景可使用renderer.setAnimationLoop(null)停止动画循环。7. 总结与下一步通过本教程你已经掌握了在 Vue3 项目中集成 Three.js 的基本流程并创建了一个可交互的 3D 场景。接下来可以探索加载外部 3D 模型GLTF/OBJ使用着色器Shader实现高级视觉效果集成物理引擎如 Cannon.js结合 Vue 的响应式数据驱动 3D 场景更新完整的示例代码可在 GitHub 上找到。祝你玩得开心创造出惊艳的 3D 应用