vue3+three.js入门小demo

鱼樱前端2025-03-06 23:50

大家好，我是鱼樱！！！

关注公众号【鱼樱AI实验室】分享更多前端和AI辅助前端编码新知识~~~后续还会分享cursor无限续杯操作

今年目标打算继续学习辅助编码AI工具、java基础，three.js、web3.js和鸿蒙next（api12后的知识点）给大家分享~为爱发电，找最难的挑战一下自己~~~

一、Three.js 是什么？

Three.js 是一个基于 WebGL 的 JavaScript 3D 图形库，它简化了浏览器中复杂 3D 场景的创建流程。通过封装 WebGL 底层 API，开发者无需深入掌握图形学原理，即可快速构建交互式 3D 应用。

核心特性

  1. 跨平台：支持桌面/移动浏览器，兼容 WebXR（VR/AR）
  2. 模块化：提供几何体、材质、光源、相机、动画等完整工具链
  3. 高性能：支持 GPU 加速渲染、实例化渲染、LOD 优化等
  4. 生态丰富：拥有模型加载器（GLTF）、物理引擎（Cannon.js）、后期特效等扩展

二、Three.js 能做什么？

1. 常见应用场景

领域 典型应用 案例参考
数据可视化 3D 地图、分子结构、实时数据仪表盘 NASA 太空数据可视化
游戏开发 网页3D游戏、休闲小游戏 HexGL（赛车游戏）
产品展示 3D 电商商品预览、虚拟展厅 IKEA Place（AR家具预览）
教育仿真 物理实验模拟、历史场景还原 Google 海洋探索

2. 技术亮点

  • 动态交互：实现物体拖拽、射线检测、物理碰撞

  • 高级特效：

    js 复制代码 
     
// 辉光特效示例  
import { BloomEffect, EffectComposer } from 'postprocessing';  
const bloomEffect = new BloomEffect({ intensity: 2 });  
composer.addPass(bloomEffect);

  • 跨端扩展：与 WebXR 结合开发 VR/AR 应用

三、如何系统学习 Three.js？

1. 学习路径（分阶段）

阶段 1：基础入门（1-2周）

  • 核心概念：场景(Scene)、相机(Camera)、渲染器(Renderer)

  • 基础组件：几何体(Geometry)、材质(Material)、光源(Light)

  • 必备工具：

    • 调试工具：Three.js Inspector 浏览器插件
    • 模型资源：Sketchfab 免费3D模型库

阶段 2：进阶实战（2-4周）

  • 动画系统：关键帧动画、骨骼动画、变形动画
  • 交互开发：射线检测(Raycaster)、拖拽控制器(DragControls)
  • 性能优化：实例化渲染(InstancedMesh)、LOD 技术

阶段 3：高级扩展（4周+）

  • 着色器编程：编写 GLSL 实现自定义材质效果
  • 物理引擎：集成 Cannon.js 实现刚体动力学
  • WebXR：开发 VR/AR 应用

2. 学习方法与资源推荐

高效学习法：

  • 20% 理论：理解 3D 坐标系、矩阵变换、光照模型

  • 80% 实践：从简单项目开始，如：

    md 复制代码 
     
# 新手项目建议  
1. 3D 粒子文字动画  
2. 全景图片查看器  
3. 第一人称视角迷宫

必看资源：

类型 推荐内容
官方文档 Three.js Docs（最新API查询）
视频教程 Three.js Journey（付费，最系统）
开源项目 Three.js 官方示例
书籍 《Learning Three.js》第五版

3. 避坑指南

常见误区：

  • ❌ 只调 API 不学原理 → 遇到复杂问题无法调试
  • ❌ 忽略 3D 数学基础 → 无法实现自定义动画效果
  • ❌ 直接上手复杂项目 → 容易挫败放弃

正确姿势：

  1. 数学补强：掌握向量、矩阵、四元数基础（推荐《3D Math Primer》）

  2. 调试技巧：

    js 复制代码 
     
// 快速定位物体  
window.THREE = THREE; // 控制台直接调试场景对象  
console.log(scene.children); // 查看场景树结构

  3. 性能意识 ：用 stats.js 监控帧率，避免过度绘制

四、学习路线图

五、入门代码示例

html 复制代码 
 
<!DOCTYPE html>  
<html>  
<body>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>  
  <script>  
    // 1. 创建场景  
    const scene = new THREE.Scene();  
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);  
    const renderer = new THREE.WebGLRenderer();  
    renderer.setSize(window.innerWidth, window.innerHeight);  
    document.body.appendChild(renderer.domElement);  

    // 2. 添加立方体  
    const geometry = new THREE.BoxGeometry();  
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });  
    const cube = new THREE.Mesh(geometry, material);  
    scene.add(cube);  
    camera.position.z = 5;  

    // 3. 动画循环  
    function animate() {  
      requestAnimationFrame(animate);  
      cube.rotation.x += 0.01;  
      cube.rotation.y += 0.01;  
      renderer.render(scene, camera);  
    }  
    animate();  
  </script>  
</body>  
</html>

📌 行动建议：

  1. 立即尝试运行上述代码，观察旋转立方体效果
  2. 访问 Three.js Editor 在线编辑场景
  3. 加入 Three.js Slack 社区 获取实时帮助

掌握 Three.js 后，你将能从前端开发者升级为 全栈 3D 开发者，在元宇宙、数字孪生等前沿领域占据先机！

Vue3 + Three

安装

sh 复制代码 
# npm方式
npm install --save three

# pnpm 方式
pnpm add three

基础入门demo

html 复制代码 
<template>
  <!-- 3D场景容器，使用ref获取DOM元素 -->
  <div class="three-container" ref="container"></div>
</template>

<script setup>
// 导入Three.js核心库
import * as THREE from 'three'
// 导入Vue组合式API
import { onMounted, onBeforeUnmount, ref } from 'vue'

// 创建DOM引用
const container = ref(null)
// 声明Three.js全局变量
let scene, camera, renderer, cube // 场景、相机、渲染器、立方体
let animationFrameId // 动画帧ID，用于清理动画

/**
 * 初始化3D场景
 * @param {HTMLElement} containerEl - 场景容器DOM元素
 */
const initScene = (containerEl) => {
  // 创建场景 - 场景是所有3D对象的容器
  scene = new THREE.Scene()

  // 创建相机 - PerspectiveCamera模拟人眼视角
  // 参数：视野角度(FOV)，长宽比，近裁剪面，远裁剪面
  camera = new THREE.PerspectiveCamera(
    75, // 视野角度
    containerEl.clientWidth / containerEl.clientHeight, // 长宽比
    0.1, // 近裁剪面
    1000 // 远裁剪面
  )
  // 设置相机位置，默认相机位于原点(0,0,0)
  camera.position.z = 5

  // 创建WebGL渲染器
  renderer = new THREE.WebGLRenderer({ 
    antialias: true // 启用抗锯齿
  })
  // 设置渲染器尺寸为容器大小
  renderer.setSize(containerEl.clientWidth, containerEl.clientHeight)
  // 设置设备像素比，避免高DPI设备模糊
  renderer.setPixelRatio(window.devicePixelRatio)
  // 将渲染器的canvas添加到DOM中
  containerEl.appendChild(renderer.domElement)

  // 创建立方体
  // BoxGeometry创建立方体几何体
  const geometry = new THREE.BoxGeometry()
  // MeshPhongMaterial创建具有镜面高光的材质
  const material = new THREE.MeshPhongMaterial({ 
    color: 0x00ff00, // 绿色
    shininess: 60 // 光泽度
  })
  // 网格对象combines几何体和材质
  cube = new THREE.Mesh(geometry, material)
  // 将立方体添加到场景中
  scene.add(cube)

  // 添加光源
  // 环境光 - 均匀照亮场景中的所有物体
  const ambientLight = new THREE.AmbientLight(0x404040) // 柔和的灰色光
  scene.add(ambientLight)

  // 平行光 - 模拟太阳光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
  directionalLight.position.set(1, 1, 1) // 设置光源位置
  scene.add(directionalLight)

  // 开始动画循环
  animate()
}

/**
 * 动画循环函数
 * 在每一帧中更新场景
 */
const animate = () => {
  // 请求下一帧动画
  animationFrameId = requestAnimationFrame(animate)

  // 更新立方体旋转
  if (cube) {
    cube.rotation.x += 0.01 // 绕X轴旋转
    cube.rotation.y += 0.01 // 绕Y轴旋转
  }

  // 渲染场景
  renderer.render(scene, camera)
}

/**
 * 处理窗口大小变化
 * 更新相机和渲染器以保持场景正确显示
 */
const handleResize = () => {
  if (!renderer || !camera) return
  
  const containerEl = renderer.domElement.parentElement
  const width = containerEl.clientWidth
  const height = containerEl.clientHeight

  // 更新相机宽高比
  camera.aspect = width / height
  camera.updateProjectionMatrix()
  // 更新渲染器尺寸
  renderer.setSize(width, height)
}

// 组件挂载时初始化场景
onMounted(() => {
  initScene(container.value)
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

// 组件卸载时清理资源
onBeforeUnmount(() => {
  // 移除事件监听
  window.removeEventListener('resize', handleResize)
  // 停止动画循环
  cancelAnimationFrame(animationFrameId)
  
  // 清理Three.js资源
  if (renderer) {
    renderer.dispose()
  }
  if (cube) {
    cube.geometry.dispose() // 清理几何体
    cube.material.dispose() // 清理材质
  }
})

// 定义组件名，用于开发工具调试
defineOptions({
  name: 'ThreeScene'
})
</script>

<style scoped>
/* 场景容器样式 */
.three-container {
  width: 100%;
  height: 100vh; /* 占满视口高度 */
  overflow: hidden; /* 防止出现滚动条 */
}
</style>

这样即可完成一个旋转立方体的效果

看到这是不是觉得入门three.js也不是那么的难呢~~~但是学会学精学懂肯定是难度存在的！！！不难咱也不玩~程序代码就是这样的简单的没挑战啊！！！

相关推荐
青红光硫化黑3 小时前
前端基础之组件自定义事件
前端
itmacy3 小时前
Element UI-Select选择器结合树形控件终极版
vue.js·elementui
姑苏洛言5 小时前
从0到1搭建315答题抽奖小程序：技术踩坑与运营真相
前端
午后书香5 小时前
一天三场面试，口干舌燥要晕倒（一）
前端·javascript·面试
whyfail5 小时前
React + TypeScript 实战指南：用类型守护你的组件
前端·react.js·typescript
阿金要当大魔王~~6 小时前
post get 给后端传参数
前端·javascript·html
慌张的葡萄6 小时前
24岁裸辞，今年26岁了😭做乞丐做保安做六边形战士
前端·面试
weixin_535854226 小时前
快手，蓝禾，优博讯，三七互娱，顺丰，oppo，游卡，汤臣倍健，康冠科技，作业帮，高途教育25届春招内推
java·前端·python·算法·硬件工程
excel6 小时前
webpack 编译器
前端
热门推荐
01DeepSeek各版本说明与优缺点分析02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03如何在WPS和Word/Excel中直接使用DeepSeek功能04Windows 11 安装 Dify 完整指南 非docker环境05DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具06本地部署DeepSeek教程（Mac版本）07PyCharm 无法识别 Conda 环境的解决方案08Anaconda +Jupyter Notebook安装（2025最新版）09DeepSeek本地部署详细指南10如何本地部署AI智能体平台，带你手搓一个AI Agent