关键词：Vue 3 / Three.js / MediaPipe / AI / WebGL / 创意编程 / 前端工程化
引言：当哈利波特的魔法棒变成了一行 URL
想象这样一个场景：
你不需要购买昂贵的 Apple Vision Pro，也不需要戴上笨重的 VR 头盔，甚至不需要安装任何 App。 你只需要打开一个网页，允许摄像头权限，对着屏幕伸出手。
握拳，屏幕上 4000 个原本漂浮的粒子瞬间向中心坍缩，聚集成一个紧密的能量球； 张手，这些粒子仿佛受到冲击，瞬间向四周炸裂，如同烟花般绚烂； 挥动，粒子流随着你的指尖起舞，从地球变成爱心，从爱心变成土星。
这就是我最近做的一个开源小项目 —— Hand Controlled 3D Particles。
在过去，这种级别的体感交互往往意味着：专业的深度摄像头（Kinect）、高性能的本地显卡、以及复杂的 C++/Unity 开发环境。 但现在，得益于 Web AI 和 WebGL 的进化，我们用纯前端技术就能复刻这种魔法。
一、效果：指尖上的粒子宇宙
在这个项目里，你的手就是控制一切的遥控器。
1. 实时手势识别
基于 Google MediaPipe Hands 模型，浏览器能以惊人的速度（60fps+）捕捉你手部的 21 个关键点。 这不是简单的"动量检测"，而是真正的"骨骼识别"：
- 拇指与食指捏合/靠近 → 触发引力场
- 手掌完全张开 → 触发斥力场
- 左右手势切换 → 切换 3D 模型形态
2. 视觉形态演变
粒子不仅仅是散乱的点，它们按照数学公式排列成 5 种形态：
- Earth（地球）：经典的 Fibonacci 球面分布
- Heart（爱心）：浪漫的心形数学曲线
- Saturn（土星）：带光环的行星系统
- Tree（圣诞树）：圆锥螺旋分布
- Fireworks（烟花）：完全随机的爆炸效果
这一切，都运行在一个普通的 Chrome 浏览器里。
二、技术解构：三驾马车如何协同？
整个项目使用 Vue 3 + TypeScript 构建，核心逻辑其实非常简单，主要依赖三个技术的有机结合。
1. The Eye: MediaPipe Hands
这是 Google 开源的轻量级机器学习模型。它的特点是：快，极快。 它不需要将视频流上传到云端处理，而是直接在浏览器端（WASM）利用 GPU 加速推理。
核心逻辑只需要关注两个关键点：
- Landmark 4 (拇指尖)
- Landmark 8 (食指尖)
// 计算拇指和食指的欧几里得距离
const distance = Math.sqrt(
(thumbTip.x - indexTip.x) ** 2 +
(thumbTip.y - indexTip.y) ** 2
)
// 设定阈值进行状态判断
if (distance < 0.08) {
// 触发"握拳/收缩"状态
emit('contract')
} else if (distance > 0.16) {
// 触发"张开/爆炸"状态
emit('explode')
}
简单的高中数学，就能把连续的模拟信号转化为离散的交互指令。
2. The Canvas: Three.js 粒子系统
4000 个粒子在 Three.js 中并不是 4000 个独立的 Mesh（那样浏览器会卡死），而是一个 THREE.Points 系统。
所有的粒子共享一个 Geometry，通过 BufferAttribute 来管理每个粒子的位置。
不同形态的切换，本质上是目标位置（Target Position）的计算。比如心形曲线：
// 心形参数方程
const x = 16 * Math.pow(Math.sin(t), 3)
const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)
const z = t * 2 // 增加一点厚度
3. The Motion: 简单的物理插值
为了让动画看起来自然，粒子不是"瞬移"到新位置的，而是每一帧都向目标位置"滑行"一点点。
// 每一帧的渲染循环中
for (let i = 0; i < particleCount; i++) {
// 当前位置 += (目标位置 - 当前位置) * 阻尼系数
positions[i] += (targetPositions[i] - positions[i]) * 0.08
}
这个简单的公式（Lerp，线性插值）赋予了粒子重量感和惯性。
三、Web AI 的启示：算力下沉与隐私红利
做完这个项目，我有几个关于 Web 技术演进的强烈感受。
1. 算力正在向端侧回流
在云计算主导的十年里，我们习惯了把一切丢给服务器。但 MediaPipe 这类 Web AI 技术的成熟，标志着端侧算力的觉醒。 现在的手机和笔记本显卡足够强大，可以在浏览器里跑百亿参数以下的小模型。 这意味着：零延迟的交互体验。你的手一动，粒子立马跟着动，不需要等待网络请求往返。
2. 隐私是最大的护城河
用户越来越介意"上传摄像头视频"。 纯前端实现的 AI 有一个天然优势：所有计算都在本地发生。 视频流只在内存里流转，从未离开过用户的设备。这种"隐私安全感"是云端 AI API 无法比拟的。
3. 创意的门槛在指数级降低
五年前，做这个效果需要懂 OpenCV、懂 C++、懂 Shader 编程。 现在，你只需要会写 JavaScript，调几个 npm 包。 技术在变得越来越平民化（Democratization），这让开发者能把精力从"怎么实现"转移到"做什么好玩的东西"上。
四、未来：还可以怎么玩？
这个 Demo 只是一个起点，它展示了 Web 交互的一种新范式——自然用户界面（NUI）。
基于这个架子，我们完全可以扩展出更多玩法：
- WebAR 营销：在电商页面，用手势"隔空"旋转商品模型；
- 无接触展示：在博物馆或展厅的大屏上，观众挥手就能翻页、缩放展品；
- 音乐可视化：让粒子不仅仅跟随手势，还随着背景音乐的频谱跳动；
- 多人远程互动：结合 WebRTC，让异地的两个人通过手势共同控制同一个 3D 场景。
五、最后
项目已开源，欢迎 Fork 玩耍，或者直接点个 Star ⭐️。
GitHub: github.com/wangmiaozer…
