人机互动雪花特效（mediapipe）

这是一款用摄像头“读懂”你手势、用三维粒子回应你动作的沉浸式互动特效作品，基于 MediaPipe 手势识别与 Three.js 粒子渲染实现，全程运行在浏览器本地，无需安装应用或连接服务器。

1.如何使用，把我给你的附件解压，把里面的网页文件拖到浏览器里就行了。会提示是否打开摄像头，打开就好。

2.为什么屏幕上右下方有开摄像头，因为有时候不知道摄像头有没有看到我。需要这个摄像头窗口扮演监视器角色。

3.为什么粒子做成了雪花的样子，因为冬天来了。盼着下一场大雪。

## 核心亮点

- 真正“隔空操控”：通过 MediaPipe 捕捉手部关键点和手势变化，将你的伸手、合掌、滑动等动作实时映射为雪花的聚拢、散开、旋转与流动，让屏幕变成一块会“回应”你的空气画板。
- 雪花视觉冲击：利用 Three.js 构建高性能粒子系统，在普通浏览器中即可呈现上千级雪花同时运动的星云、光流、能量场等效果，轻松营造科技感与未来感舞台。
## 技术优势

- 纯前端、零门槛体验：只需打开网页并授权摄像头，即可直接上手手势互动，无需下载客户端、无需后端服务，适合活动 H5、展厅大屏、线上发布会等快速部署场景。
- 高精度手势追踪：依托 MediaPipe 预训练模型，可精准识别手部多点关节与姿态，在快速移动和复杂动作下依然保持稳定追踪，为顺滑的粒子动画提供可靠输入。

## 应用场景

- 品牌活动与展陈互动：用于科技展、艺术展、发布会现场的大屏互动，让观众通过简单手势触发品牌 Logo 粒子聚合、主题图形生成等，显著提升参与感和记忆点。
- 教学与创意展示：可作为“人机交互”“计算机视觉”“Web3D”课程的实战案例，也适合作为个人作品集或演示 Demo，展示你在 AI 手势识别与 WebGL 可视化方向的综合能力。



功能亮点：
粒子系统：使用 Three.js 创建一个包含数千个雪花的动态星空 / 矩阵。

Shader 编程：使用 GLSL 着色器编写自定义逻辑，使雪花能够流畅地响应外力，而不是简单的 CPU 动画，保证了高性能。

手势识别：集成 MediaPipe Hands，精准捕捉手指（食指指尖）的位置。

互动效果：当你的手出现在摄像头前时，雪花会感知到你的手指位置，并产生“斥力场”或“能量波”效果，雪花会随着你的手势散开并变换颜色。

### 核心功能：

1. ** 粒子系统 **：基于 Three.js 创建流动的雪花流。
2. ** 手势识别 **：使用 MediaPipe Hands 追踪你的手。
3. ** 互动 **：
* ** 食指(Index Finger) **：会像魔法棒一样发射粒子。
* 粒子会根据你的手指移动轨迹产生拖尾特效。

代码解析与使用说明

1. ** 架构变化JavaScript
* ** Three.js ** 是纯 JavaScript 库，运行在浏览器中。
* ** MediaPipe ** 我们在浏览器中同时运行 MediaPipe JS 版和 Three.js。这样 AI 识别和 3D 渲染都在同一个内存空间，
速度极快（60 FPS）。


2. ** 核心逻辑 **:
* ** 粒子系统(`THREE.Points`) **：我们创建了 2000 个粒子。它们平时是“死”的（隐藏在远处）。
* ** 发射器 **：当你伸出手，MediaPipe 会找到你的 ** 食指指尖(Landmark 8) **。
* ** 坐标映射 **：将摄像头画面的 2D 坐标(0~1) 映射到 3D 场景的坐标(例如 - 40 到 + 40)。
* ** 复活机制 **：程序会不断检查食指位置，并在该位置“复活”死掉的粒子。
* ** 物理效果 **：复活的粒子会获得一个随机的向外扩散速度，并随着时间受到重力影响下落，同时颜色不断变化（流光效果）。


3. ** 如何体验 **:
* 在右侧预览窗口中，你应该会看到黑屏并提示“正在启动摄像头”。
* ** 允许摄像头权限 **。
* 伸出你的手，竖起 ** 食指 **。
* 移动手指，你会看到绚丽的 3D 粒子流光跟随你的指尖飞舞！