1.前言
1本人心血来潮，看着网上那么多，我自己也vibecoding搞了一个，请看视频
【手势控制粒子-哔哩哔哩】 https://b23.tv/nir9AkU
2.项目解析
1. 项目简介与核心亮点
本项目是一个纯前端的单文件 3D 粒子特效页面。用户可以通过电脑摄像头，用手势（张开/握拳）实时控制 3D 粒子的扩散与聚合，并支持多种形态的平滑切换。
核心能力：
-
多形态 3D 渲染： 支持烟花、球体、心形、花朵、土星等粒子形态。
-
GPU 平滑形变： 基于 Shader 实现粒子状态间的丝滑插值过渡，无跳变感。
-
AI 手势交互： 接入 MediaPipe Hands，实时捕捉手部动作控制粒子。
-
可视化控制面板： 动态调整颜色、数量、大小、Bloom 辉光效果等参数。
2. 技术栈与运行环境
-
渲染引擎：
Three.js(含EffectComposer后处理) -
视觉识别：
@mediapipe/hands(手部关键点检测) -
架构： HTML + 原生 JS (ES Modules)，零构建工具。
运行提示： 由于需要调用摄像头和加载 ES Module，需通过本地 HTTP 服务启动（如使用 Python：python -m http.server 5500），不要直接双击打开 HTML 文件。
3. 核心技术原理解析
3.1 基于 Shader 的粒子渲染与形变
粒子数量庞大，依靠 CPU 计算性能开销极高。本项目巧妙地将动画逻辑转移至 GPU：
-
双坐标存储： 在
BufferGeometry中为每个粒子存入aFrom(起始位置) 和aTo(目标位置) 两个 Attribute。 -
顶点着色器插值： 传入
uMorph(0到1) 进度变量，在 Shader 中使用mix(aFrom, aTo, progress)计算当前坐标，实现形态间的无缝切换。 -
动态扰动： 结合
uTime和自定义随机种子aSeed，让粒子产生自然的呼吸感。
3.2 粒子形态生成算法
通过数学公式在三维空间中撒点：
-
球体 (Sphere)： 运用黄金角分布算法，生成分布均匀的球面点阵。
-
心形 (Heart)： 使用经典二维心形参数方程（结合 sin 和 cos），并附加 z 轴厚度转为 3D 点云。
-
花朵 (Flower)： 利用极坐标花瓣函数生成螺旋增长的形态。
3.3 MediaPipe 手势映射逻辑
如何将摄像头的画面变成粒子的控制力？
-
获取骨架点： MediaPipe 实时输出手部 21 个关键点 (Landmarks)。
-
计算张开度 (Tension)： 提取手腕到指尖的距离，对比手腕到指关节的距离，综合评判五根手指的伸直状态，得出一个
0~1的张开度分数。 -
驱动粒子扩散： 将张开度映射为 Shader 中的
uSpread(扩散倍率) 变量。-
张开度
< 0.32（握拳）：粒子聚合。 -
张开度
> 0.66（张开）：粒子全屏扩散。
-
-
防抖处理： 引入简单的缓动函数
currentSpread += (targetSpread - currentSpread) * 0.1，消除识别抖动造成的画面闪烁。
4. 避坑指南与优化建议
在实际二开或维护该项目时，需要注意以下几点：
-
中文乱码问题： 如果发现页面 UI 显示乱码，通常是文件编码问题。请务必将 HTML 文件使用
UTF-8格式重新保存。 -
CDN 依赖风险： 页面高度依赖
unpkg和jsdelivr。生产环境中建议将 Three.js 和 MediaPipe 核心库下载到本地，避免网络波动导致白屏。 -
性能瓶颈： 粒子数量过高或开启 Bloom 后处理会对低端显卡造成压力。建议根据
window.devicePixelRatio限制渲染分辨率，MediaPipe 设置中开启maxNumHands: 1（仅识别单手）以节省 CPU 开销。 -
工程化改造： 虽然单文件便于分享，但后期维护成本高。建议拆分为
renderer.js(ThreeJS逻辑)、gestures.js(手势逻辑)、shaders/(着色器文件) 等模块，引入 Vite 或 Webpack 进行管理。
总结： 通过这个项目，我们可以清晰地看到 Three.js (视觉表现) 与 MediaPipe (交互输入) 结合的巨大潜力。掌握 Shader 动画与 AI 数据的映射逻辑，你就能在 Web 端创造出更多极具沉浸感的创意交互体验。