1.前言1本人心血来潮看着网上那么多我自己也vibecoding搞了一个请看视频【手势控制粒子-哔哩哔哩】 https://b23.tv/nir9AkU2.项目解析1. 项目简介与核心亮点本项目是一个纯前端的单文件 3D 粒子特效页面。用户可以通过电脑摄像头用手势张开/握拳实时控制 3D 粒子的扩散与聚合并支持多种形态的平滑切换。核心能力多形态 3D 渲染支持烟花、球体、心形、花朵、土星等粒子形态。GPU 平滑形变基于 Shader 实现粒子状态间的丝滑插值过渡无跳变感。AI 手势交互接入 MediaPipe Hands实时捕捉手部动作控制粒子。可视化控制面板动态调整颜色、数量、大小、Bloom 辉光效果等参数。2. 技术栈与运行环境渲染引擎Three.js(含EffectComposer后处理)视觉识别mediapipe/hands(手部关键点检测)架构HTML 原生 JS (ES Modules)零构建工具。运行提示由于需要调用摄像头和加载 ES Module需通过本地 HTTP 服务启动如使用 Pythonpython -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 端创造出更多极具沉浸感的创意交互体验。用的开源的手势ai库大家拿到代码自己分析下吧下载链接链接我放 评论区吧