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

文章目录

• 前言
• 一、环境准备
• • 1.1 创建Vue3项目
  • 1.2 安装Three.js
  • 二、Three.js核心概念速览
  • 三、实战：创建旋转立方体
  • • 3.1 组件化初始化
    • 四、核心代码解析
    • • 4.1 Vue3响应式整合技巧
      • 4.2 性能优化要点
      • 五、进阶功能扩展
      • • 5.1 数据驱动控制
        • 5.2 加载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 组件化初始化

              
            
            
            
            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)
              }
            })
            
            
            .canvas-container {
              width: 100vw;
              height: 100vh;
              margin: 0;
              overflow: hidden;
            }
            
            

            四、核心代码解析

            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 数据驱动控制

              import { ref } from 'vue'
              const cubeColor = ref('#00ff00')
              // 监听颜色变化
              watch(cubeColor, (newVal) => {
                cube.material.color.set(newVal)
              })
              
              
                
              
              

              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进行状态管理