纯前端实现科幻级交互！Three.js 结合 MediaPipe 打造 3D 手势粒子引擎 (附源码与在线演示)

🚀 手撕“赛博朋克”级 Web 交互：用Three.js+ AI 视觉打造隔空手势控制的 3D 粒子系统

💡百闻不如一见：
👉点击这里立即体验在线 Live Demo(注：纯前端实现，请允许摄像头权限，推荐在电脑端全屏体验)
🔗获取完整 GitHub 源码

想象一下科幻电影里的场景：主角站在屏幕前，不需要鼠标和键盘，仅凭双手的挥动与张合，就能在空中操控庞大的全息星系。

今天，我们将把这种“钢铁侠”级别的科幻交互搬进浏览器！在这篇教程中，我将带你解析如何结合Three.js和 Google 的MediaPipe，用纯前端代码打造一个带有物理阻尼、发光光晕、且能被你“隔空操控”的 Pro 级 3D 粒子引擎。

🛠 技术栈揭秘

这套炫酷系统的背后，并没有极其复杂的底层 C++ 引擎，而是完全依赖于现代 Web 技术：

• Three.js (WebGL)：负责 20,000 个高帧率粒子的 3D 渲染与发光材质混合。
• MediaPipe Hands：Google 开源的轻量级 AI 视觉库，能在浏览器中实时追踪手部 21 个关键点。
• lil-gui：提供现代感极强的极简调试面板。
• HTML5 Canvas：用于动态生成具有羽化渐变效果的发光纹理贴图。

核心技术亮点解析，我们做对了什么？

如果你曾经尝试过写 Three.js 的粒子系统，大概率会遇到“像一堆方形马赛克”、“交互生硬”等问题。为了达到“发烧级”的视觉与手感，我们在代码中加入了以下几个关键的“黑科技”：

1. 拒绝马赛克，手绘径向渐变发光纹理 (Radial Gradient)

默认的THREE.Points是硬邦邦的方形像素点。为了营造出“星光”和“能量体”的感觉，我们没有引入任何外部图片，而是利用Canvas API在内存中直接画了一个从中心到边缘透明度渐变的圆形贴图。

结合 Three.js 的加色混合模式 (THREE.AdditiveBlending) 与depthWrite: false，当几千个半透明光球重叠在一起时，就会爆发出极其绚丽的高光，彻底消除边缘互相遮挡的“黑边”问题。

2. 数学即艺术：抛弃静态模型，用公式演算生命

系统内置了三种全息形态，全部通过纯数学公式生成顶点坐标：

• 螺旋星系 (Galaxy)：利用极坐标系下的分支算法，加上随半径扩大的随机偏移量，模拟出带有旋臂的宇宙星云。
• 心跳波段 (Heart)：运用经典的 3D 爱心参数方程，构建出具有空心体积感的跳动心脏。
• 生命密码 (DNA)：生成两条缠绕的正弦轨迹，并赋予随机横向连接键。

不仅如此，借助顶点着色器 (Vertex Colors)，我们根据粒子在空间中的相对位置，让双色调色盘发生平滑的渐变，赋予了粒子群流光溢彩的层次感。

3. AI 视觉注入：让粒子拥有“被引力牵引”的灵魂

这不仅仅是一个看着爽的动画，它能真正理解你的手势：

• 隔空取物 (空间追踪)：系统实时提取你掌心（Landmark 9）的屏幕坐标，将其反向投影到 3D 世界中。你的手掌在哪，整个星系就悬浮在哪。
• 掌控宇宙 (聚散控制)：通过计算大拇指尖（Landmark 4）与食指尖（Landmark 8）的 3D 欧几里得距离，动态映射为粒子的扩张与收缩系数。捏合缩小，张开爆炸！

4. 丝滑交互的终极秘密：物理插值算法 (Lerp)

这是很多新手容易忽略的一步！摄像头捕捉到的关键点数据往往伴随着高频的微小抖动，如果直接把数据赋给粒子系统，画面会像抽风一样闪烁。

在代码的渲染循环中，我们引入了线性插值算法 (Lerp)。无论是整体的位移、大小的缩放，还是粒子归位的速度，都加入了一层物理弹簧般的阻尼感。这不仅完全过滤了摄像头的抖动，更让粒子的运动看起来像水母或流体一样富有弹性。

结语

从一个枯燥的 3D 坐标系，到充满生机的发光粒子群，再到能与人类双向奔赴的 AI 交互引擎，现代 Web 技术的潜力无穷无尽。希望这个项目能为你打开一扇通往 WebGL 创意编程的大门。

源码和在线体验地址都在文章开头，你可以自由 fork 并修改。你会用这套粒子引擎创造什么独特的全息形态呢？欢迎在评论区分享你的绝佳配色与奇思妙想！