零硬件交互：如何用纯前端把摄像头变成 4000 个粒子的魔法棒？

关键词：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 (食指尖)

javascript 复制代码

// 计算拇指和食指的欧几里得距离
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）的计算。比如心形曲线：

javascript 复制代码

// 心形参数方程
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: 简单的物理插值

为了让动画看起来自然，粒子不是"瞬移"到新位置的，而是每一帧都向目标位置"滑行"一点点。

javascript 复制代码

// 每一帧的渲染循环中
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...