Pixel Flow · 图片粒子化与手势还原

上传(或使用内置示例)图片 → Canvas 提取像素 → 每个采样点成为 Three.js 粒子,初始为飘散粒子流; 摄像头 + MediaPipe Hands 实时追踪手部:张开手掌激活「还原力场」,粒子向原图位置汇聚;握拳暂停还原。无摄像头环境自动降级为鼠标力场模式。

初始化…
手势:—
正在加载 Three.js / MediaPipe(CDN)…
图片
采样密度
还原力度
手势说明:张开手掌 = 激活还原力场(粒子加速回位);握拳 = 暂停还原(粒子继续飘散);手的位置 = 力场中心(力场内粒子额外加速)。 降级模式:摄像头不可用、MediaPipe 加载失败或处于 iframe 等无摄像头授权环境时,自动切换为鼠标 / 触摸力场(按住画布 = 激活还原)。 技术栈:Vanilla JS + Three.js(粒子渲染)+ MediaPipe Hands(手部关键点)+ Canvas API(像素提取);力场为弹簧-阻尼物理,非固定动画。