文章

Vibe Coding分享一：3D手势抽卡

Posted 昨天 Updated 昨天
By boommanpro
14~19 min read

背景

经常在抖音看到大家使用AI开发基于视觉的一些应用，感觉非常有意思，遂分享。

链接：https://boommanpro.github.io/build-my-ai-tools/geture_draw_card/

ai coding地址：https://github.com/boommanpro/build-my-ai-tools

个人总结

  1. 产品经理需要具备什么能力？

    1. 能够精准描述产品能力，全部流程，交互逻辑。

    2. 具备抽象核心流程，化繁为简的能力。

    3. 具备广阔视野，具备技术栈实现（开源视野），具备产品视野（哪些产品可以参考）。

  2. 此项目有哪些收获？

    1. 核心流程：状态机的表达需要非常清晰，因为偷懒所以没有做，导致花了很长时间在fix。

    2. 技术栈选型依赖ai，没有提供参考网址，没有提供参考示例。

    3. 每次AI对话轮次超过5轮，要停下来想为什么，什么原因。

  3. 换个角度，除了问题还能收获什么？

    1. AI 能帮我们快速构建demo，然后反向推提示词，优化提示词，最终正确do while verify contine break 完成。

  4. 接下来怎么做？

    1. 多逛产品网站，熟悉业界最佳实践。

    2. 多熟悉技术栈，熟悉技术边界，熟悉技术文档纲领。

    3. 沉淀通过demo反向构建提示词的标准模板。下一篇分享？期望没有拖延症。

  5. 前端注意事项：

    1. 最终方案创建了混合加载器，优先使用ES模块导入，失败时回退到CDN方式，并添加了全局对象检测。关键经验：编码时要考虑环境兼容性，实现多层回退机制，做好错误处理和调试信息记录。

初版提示词（通过想法构建初版应用，然后反向推出完整提示词）

# 手势抽卡3D应用

✨ 基于React和MediaPipe的手势识别抽卡应用，通过实时手势控制享受3D卡片翻转体验。
将配置卡片围成一个3D横向圆圈，不断旋转，不展示内容，当用户进行手势操作后才选定抽取。

## 功能特色

- 🤚 **实时手势识别** - 通过摄像头识别握拳、张掌等多种手势
- 🎴 **3D卡片效果** - 流畅的3D翻转动画和精美的视觉设计
- 🎮 **交互体验** - 手势控制抽卡、旋转卡片等丰富互动
- 🌈 **精美UI** - 渐变色彩、光影效果和动态粒子背景

## 核心功能

### 1. 实时手势识别
- **握拳识别** (`fist`): 准备抽卡状态
- **张开手掌** (`open_palm`): 触发抽卡动作
- **剪刀手** (`peace`): 切换卡牌或返回主界面
- **食指点** (`pointing`): 用于3D旋转控制
- **拇指向上** (`thumb_up`): 确认操作

### 2. 3D卡片系统
- 3D旋转效果：通过手掌移动控制卡片旋转
- 卡片翻转动画：使用Framer Motion实现流畅动画
- 双面设计：正面为预览图，背面为内容详情
- 渐变色彩主题：每张卡片都有独特的渐变色

### 3. 动态交互
- 手势引导提示：显示当前检测到的手势
- 粒子动画背景：营造沉浸式体验
- 光影效果：动态发光边框和光泽动画

### 4. 抽卡机制
- 随机卡牌抽取：从18种不同主题的卡牌中随机抽取
- 卡牌分类：包含勇气、梦想、希望、智慧等多个主题类别
- 重新抽卡功能：支持连续抽卡

## 核心技术栈

### 1. 前端框架
- **React 18**: 构建用户界面
- **Vite**: 快速构建工具
- **TailwindCSS**: 样式设计

### 2. 手势识别引擎
- **MediaPipe Hands**: Google开源的手势识别库
- **@mediapipe/hands**: JavaScript API接口
- **@mediapipe/camera_utils**: 摄像头管理
- **@mediapipe/drawing_utils**: 手势可视化

### 3. 动画引擎
- **Framer Motion**: 高性能动画库
- **CSS 3D Transform**: 3D变换效果
- **TailwindCSS**: 响应式样式

### 4. 数据处理
- **JavaScript ES6+**: 数据处理和逻辑控制
- **数组洗牌算法**: Fisher-Yates算法实现卡牌随机化

## 技术架构

### 1. 应用组件结构
```
App.jsx
├── Card3D.jsx (3D卡片渲染)
├── HandTracking.jsx (手势识别)
└── CardContent.js (卡牌数据)
```

### 2. 手势识别流程
1. **摄像头访问**: 获取用户媒体设备权限
2. **模型加载**: 加载MediaPipe手部检测模型
3. **实时处理**: 每帧捕获视频流并检测手势
4. **手势判断**: 基于手指关键点位置判断手势类型
5. **事件回调**: 将识别结果传递给应用逻辑

### 3. 手势判断算法
```javascript
// 关键手指节点索引定义
const tips = [8, 12, 16, 20];  // 食指、中指、无名指、小指指尖
const pip = [6, 10, 14, 18];   // 对应手指近节指骨

// 手势判断逻辑
const isFist = extendedFingers === 0;
const isOpenPalm = extendedFingers === 4 && thumbExtended;
const isPeace = indexFingerExtended && middleFingerExtended &&
                !ringFingerExtended && !pinkyFingerExtended;
```

### 4. 3D变换实现
```javascript
// 使用CSS 3D Transform实现卡片旋转
transform: `rotateY(${rotationY}deg) rotateX(${rotationX}deg)`
```

## 功能模块详解

### 1. HandTracking组件
- **职责**: 实现摄像头访问、手势识别和坐标跟踪
- **核心技术**: MediaPipe JavaScript API
- **输入**: 用户摄像头视频流
- **输出**: 手势类型、手部坐标信息

### 2. Card3D组件
- **职责**: 3D卡片渲染、翻转动画控制
- **核心技术**: CSS 3D Transform + Framer Motion
- **特性**: 双面设计、响应式动画、光影效果

### 3. 数据管理模块
- **卡牌内容**: 包含18种不同主题的励志卡片
- **随机算法**: Fisher-Yates洗牌算法
- **状态管理**: React Hooks (useState, useEffect等)

## 交互流程

### 1. 启动流程
1. 加载初始卡牌
2. 初始化粒子动画
3. 启动摄像头和手势识别
4. 显示欢迎界面

### 2. 抽卡流程
1. 用户握拳（`fist`）准备抽卡
2. 展开手掌（`open_palm`）触发抽卡
3. 卡片翻转动画播放
4. 显示抽中的卡牌内容

### 3. 3D控制流程
1. 手掌左右移动 → 卡片Y轴旋转
2. 手掌上下移动 → 卡片X轴旋转
3. 实时坐标变化 → 平滑旋转过渡

## 性能优化策略

### 1. 手势识别优化
- **帧率控制**: 使用requestAnimationFrame限制处理频率
- **手势防抖**: 设置500ms冷却时间避免重复触发
- **模型复杂度**: 适配模型复杂度平衡精度和性能

### 2. 渲染优化
- **虚拟DOM**: React的高效更新机制
- **动画优化**: 使用CSS硬件加速属性
- **资源懒加载**: 按需加载组件和资源

### 3. 内存管理
- **资源清理**: 组件卸载时释放摄像头和模型资源
- **事件解绑**: 清理定时器和动画帧回调
- **内存监控**: 避免循环引用和内存泄漏

## 安全性考虑

### 1. 隐私保护
- **本地处理**: 所有手势识别在客户端完成
- **数据加密**: 不存储用户手势数据
- **权限控制**: 明确请求摄像头使用权限

### 2. 权限管理
- **摄像头权限**: 仅在启用时请求
- **安全域限制**: 支持HTTPS和localhost环境
- **用户控制**: 提供开关控制摄像头启用状态

## 扩展性设计

### 1. 卡牌内容扩展
- **数据驱动**: 通过CardContent.js轻松添加新卡牌
- **主题分类**: 支持多种卡牌主题和样式
- **国际化**: 支持多语言卡牌内容

### 2. 手势功能扩展
- **手势库**: 易于添加新的手势识别
- **自定义映射**: 支持手势到功能的自定义绑定
- **AI训练**: 支持个性化手势模型训练

### 3. 设备兼容性
- **响应式设计**: 适配不同屏幕尺寸
- **浏览器兼容**: 支持现代浏览器
- **移动端优化**: 针对触摸设备优化交互

## 快速开始

### 环境要求
- Node.js 18+
- 支持摄像头的浏览器（推荐Chrome）

### 安装运行

```bash
# 克隆项目
git clone <repository-url>

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

### 构建生产版本

```bash
# 构建项目
npm run build

# 预览构建结果
npm run preview
```

## 部署与运行

### 运行要求
- **浏览器**: Chrome 70+, Firefox 75+, Safari 13+
- **摄像头**: 支持getUserMedia API的设备
- **网络**: 需要访问CDN加载MediaPipe模型

## 故障排除

### 常见问题
1. **摄像头权限**: 确保授予网站摄像头访问权限
2. **HTTPS要求**: 生产环境需使用HTTPS协议
3. **性能问题**: 确保设备性能满足实时处理需求

### 错误处理
- **模型加载失败**: 自动重试机制
- **摄像头不可用**: 提供手动重试选项
- **手势识别异常**: 降级到手动操作模式

## 技术亮点总结

1. **前沿技术融合**: 结合WebGL、计算机视觉和前端动画技术
2. **沉浸式体验**: 3D交互和实时手势反馈
3. **性能优化**: 高效的渲染和资源管理
4. **用户友好**: 直观的手势操作和视觉反馈
5. **可扩展性**: 模块化设计便于功能扩展

这个项目展示了现代Web技术的强大能力，将AR/VR概念融入日常应用中，为用户提供新颖有趣的交互体验。

彩蛋（流程代码review）

现在全部都开发完成了，接下来你不需要修改任何代码，仅和我进行聊天即可。
从我们的对话中，我发现我们需要通过轮对话才能解决问题，你觉得问题这个原因可能是什么？这个过程中我的思路有什么问题吗

我们总过对话了多少轮，你觉得我们交互过程中比较好的是什么，不好的是什么
问题在我 ：

- 我没有在编码前充分沟通
- 没有预判技术风险
- 没有提供方案让你确认
## 更好的协作方式应该是：
你的需求 → 我提问澄清 → 你确认 → 我设计方案 → 你审核 → 我实现
而不是：
你的需求 → 我直接实现 → 你发现问题 → 我修复 

大模型, 编程分享
日常生活 编程分享
License:  晋ICP备16009994号-1