aiorz-webar

AIORZ WebAR

一个基于 React + Three.js + MediaPipe 的 WebAR 手势识别粒子效果项目。

功能特性

• 🎨 实时粒子效果渲染
• 🤲 手势识别（拳头、胜利手势、食指、拇指等）
• 🎯 多种粒子形状切换（球体、土星、文字、心形、机器人）
• 📱 响应式设计
• ⚡ 基于 Vite 的快速开发体验

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

项目将在 http://localhost:3000 启动。

构建生产版本

npm run build

预览生产构建

npm run preview

手势控制

• 🖐️ 张开手掌 - 重置为球体（SPHERE）
• ✊ 握拳 - 显示土星（SATURN）
• ✌️ 胜利手势 - 显示品牌标识（IDENTITY）
• ☝️ 食指 - 显示机器人（MECHA）
• 👍 拇指 - 显示心形（HEART）

技术栈

• React 18
• TypeScript
• Three.js (通过 CDN 加载)
• MediaPipe Hands (通过 CDN 加载)
• TailwindCSS
• Vite

注意事项

• 需要浏览器支持摄像头访问权限
• 建议使用 Chrome 或 Edge 浏览器以获得最佳体验
• 需要 HTTPS 环境或 localhost 才能访问摄像头