分享｜网络超火的3D粒子手势交互
张开手掌，25000 颗粒子瞬间散成一片星海；握紧拳头，它们又乖乖聚成一颗发光的爱心；比个耶，粒子直接拼出了你的名字
最近刷视频刷到一个很有意思的粒子手势交互效果，去搜了搜，然后废了我九牛二虎之力让DeepSeek酱肝了一个出来
我给的指令如下，大家也可以试一试，有bug再微调修改，文末也有源码可以下载
请写一个完整的 HTML 文件，实现网红级 3D 粒子手势交互：
1. 用 Three.js 做 3D 粒子系统，默认散开缓慢流动
2. 调用电脑摄像头，识别手势：
- 张开手掌：粒子放大变慢
- 握拳：粒子聚成爱心、花朵、土星、佛像、烟花、星球形状
- 比耶：粒子聚成可自定义文字
3. 加简单控制面板：切换形状、改颜色、自定义文字、调节粒子数量
4. 页面全屏、背景黑色、粒子发光效果
5. 代码要完整、直接保存为 .html 使用下面为AI的介绍ヾ(≧∇≦*)ゝ
技术架构
┌─────────────────────────────────────────────────────┐
│ 浏览器页面 │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 摄像头采集 │──▶│ MediaPipe │──▶ 手势分类 │
│ │ (320×240) │ │ Hands 21点 │ (张开/握拳/✌) │
│ └──────────────┘ └──────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────┐ │
│ │ Three.js 渲染引擎 │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────────┐ │ │
│ │ │ 散开坐标 │ │ 图案坐标 │ │ 文字坐标 │ │ │
│ │ │ (球壳+臂)│ │(6种图形) │ │(Canvas扫描) │ │ │
│ │ └────┬────┘ └────┬────┘ └──────┬──────┘ │ │
│ │ └────────────┼──────────────┘ │ │
│ │ ▼ │ │
│ │ Lerp 插值过渡 │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ 25000 粒子实时渲染 │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘核心技术栈非常精简：Three.js（3D 渲染）+ MediaPipe Hands（手势识别），仅此而已，无需任何后端服务，纯浏览器端运行。
手势交互
三种手势，三种世界
整个交互就靠三个简单手势，但每种都带来完全不同的视觉体验：
🖐 张开手掌 —— 粒子星云
这是默认状态。手掌完全展开时，两万多颗粒子在空间中膨胀成一个巨大的发光球体，同时保持慢速旋转。粒子之间自然形成的螺旋结构，看起来就像 NASA 拍的星云照片。
有一个特别戳我的细节：手张得越开，粒子就扩散得越远；手指慢慢收拢，粒子也会跟着往回缩。像一个有弹性的星云，随着你的呼吸一胀一缩。这个"将要被抓住"的感觉，特别微妙也特别上瘾。
✊ 握拳 —— 六种立体图案
握紧拳头，粒子立刻像被磁铁吸引一样，飞速汇聚成一个个精美的 3D 图案。可选的有六种：
- ❤️ 爱心：经典的心形，粒子从内到外填充，立体又闪耀
- 🌸 花朵：三层花瓣，像一朵发光的玫瑰花在旋转
- 🪐 土星：一颗实心球体外环绕着倾斜的光环，绝美
- 🧘 佛像：有头、有身体、有底座，粒子组成的人形轮廓
- 🎆 烟花：16 条光线从中心炸开，末端散成星芒，定格在最灿烂的瞬间
- 🌍 星球：外层壳 + 内核 + 赤道光环 + 大气层粒子，层次巨丰富
切换图案的那一刻真的会让人"哇"出来——两万多个光点同时改变方向，在空中划出无数条流光轨迹，然后突然就变成了一颗完整的爱心。这个过程大概只有一秒多，但每次看都觉得很治愈。
✌️ 比耶 —— 自定义文字
这可能是最酷的功能了。在面板里输入任何文字（最多 6 个字符，支持中文），对着摄像头比个 ✌，粒子就会自动拼出你刚刚输入的内容。
我试了把自己的名字打进去——"NanNan"——比耶之后，粒子在空中一笔一划地排成这些字母。立体发光文字悬浮在黑色星空中，你还可以用手腕拖拽旋转，从各个角度欣赏自己的"粒子签名"。
想象一下，在活动或者展览上，每个人都可以让粒子拼出自己的名字然后拍照——这简直是个天然的社交打卡点。
👋 像魔法一样的拖拽旋转
这里要特别说一下旋转这个交互方式，因为它真的很独特。
传统的 3D 画面旋转，要么鼠标拖拽，要么触摸屏滑动。但这个项目用的是——手腕在空中移动。
不需要碰任何东西。你的手在摄像头前左右移动，画面就跟着左右转；上下移动，画面就仰俯。移动多少就转多少，停下来就不动了。这种"无接触操控"的感觉，第一次体验时真的很震撼，像电影里的全息投影交互。
而且刚切换到新图案时，画面会先正面静止一秒钟让你看清楚，一秒之后才解锁旋转。这个小设计很贴心——要不然你还没看清图案长什么样，手一动画面就歪了。
项目源码
AI介绍得太好废话太多啦，为了不浪费大家时间，直接给上源码下载地址
结语
谢谢观看！如果此文章对你有帮助，不妨点个赞支持我一下(*/ω＼*)
* 此文章含有AI生成内容