WebAR 项目导航

基于 Three.js 和 MediaPipe Hands 的 WebAR 互动体验

🚀 手势识别 · 3D粒子 · AR交互

🌟 项目介绍

这是一个基于 Three.jsMediaPipe Hands 的 WebAR 互动应用集合, 包含三个完整的 3D 交互体验:粒子系统圣诞树系统星球粒子系统

Three.js v0.160.0 MediaPipe Hands WebGL GPU加速 UnrealBloomPass 辉光
五态手势识别
🎨 玻璃拟态 UI
16,000+ 粒子渲染
📱 双模式支持

粒子互动系统 V6.0.0

16,000个青色流体粒子,采用Fibonacci球面分布算法。五态手势识别:张手→球形、剪刀手→文字、握拳→圆环、食指→星形、竖大拇指→爱心。玻璃拟态UI设计。

⭐ 推荐体验
🔧

粒子系统 - 修复版

修复了手势识别稳定性和性能问题,提供更流畅的交互体验。

修复版
🎯

粒子系统 - 最终版

离线演示版本,无需摄像头也可预览粒子效果。适合快速体验和展示。

离线演示
🎄

圣诞树交互系统

3D圣诞树构建:30个球体+20个立方体+15个糖果棍+10个照片位。三态状态管理:合拢态、散开态、照片放大态。手势控制:握拳→合拢、张手→散开、抓取→选择照片。

🎄 节日特别版
🪐

星球粒子系统 V5.0.0

照片上传功能:支持多文件选择,最多保存15张照片。橙色星球核心:4,000个橙色粒子。白色星环:3,000个白色粒子环绕。9个固定3D位置展示照片。

🌌 宇宙主题
🧪

手势测试工具

测试手势识别功能,查看摄像头捕获和手势检测状态。用于调试和验证设备兼容性。

测试工具
🍉

摄像头切水果小游戏

体感刀锋交互:优先启用摄像头食指轨迹切水果,支持鼠标/触摸兜底操作。包含分数、生命、炸弹判定和粒子特效。

🎮 新增入口