Carl
51ee592362
ai favicon
|
пре 20 часа | |
|---|---|---|
| public | пре 21 часа | |
| src | пре 20 часа | |
| .gitignore | пре 23 часа | |
| DEPLOY.md | пре 21 часа | |
| README.md | пре 23 часа | |
| index.html | пре 21 часа | |
| install-certbot.sh | пре 21 часа | |
| liuxing.html | пре 22 часа | |
| nginx.conf.domain | пре 21 часа | |
| nginx.conf.example | пре 21 часа | |
| package-lock.json | пре 23 часа | |
| package.json | пре 23 часа | |
| postcss.config.js | пре 23 часа | |
| tailwind.config.js | пре 23 часа | |
| tsconfig.json | пре 23 часа | |
| tsconfig.node.json | пре 23 часа | |
| vite.config.ts | пре 23 часа |
README.md
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 才能访问摄像头