web手势剑阵（开源）

项目源码：

「剑阵网页」
链接：https://pan.quark.cn/s/4c489fd6cc2c

基于Three.js和MediaPipe手势识别技术打造的交互式3D剑阵演示项目。通过摄像头捕捉用户手势，实时控制数百把飞剑形成不同的剑阵形态，创造出震撼的视觉效果。

核心特性

✨ 视觉效果

• 400把飞剑实时渲染：每把剑都有精细的几何建模和发光效果

• 四种剑阵模式：莲花阵、护盾阵、大庚剑阵、游龙阵

• 高级光影效果：辉光、闪电连接、魔法阵等特效

• 星空背景：动态粒子系统营造深邃空间感

👋 手势交互

• 实时手势识别：基于MediaPipe Hand Landmarker

• 四种手势对应不同剑阵：

  • 🖐️ 张掌 → 莲花剑阵

  • ✊ 握拳 → 护盾阵型

  • 🤘 摇滚手势 → 大庚剑阵

  • 👆 剑指 → 游龙随行

• 平滑过渡：手势识别防抖，避免模式频繁切换

🎮 技术特色

• Three.js InstancedMesh：高性能渲染数百个剑实例

• 物理模拟：基于转向行为的飞剑运动系统

• 响应式设计：支持桌面和移动端横屏体验

• 本地化部署：所有资源可本地加载，无需网络依赖

快速开始

环境要求

• 现代浏览器（支持WebGL和WebRTC）

• 摄像头设备

• 本地服务器环境（避免CORS问题）

项目根目录/
├── index.html # 主页面
├── asset/ # 静态资源目录
│ ├── vue.js # Vue框架
│ ├── three.min.js # Three.js库
│ └── vision.js # MediaPipe桥接模块
├── wasm/ # WASM文件目录
│ └── ... # MediaPipe WASM文件
└── models/ # AI模型目录
└── hand_landmarker.task # 手势识别模型

启动步骤

1. 将项目文件放置在Web服务器中

2. 确保asset/、wasm/、models/目录结构正确

3. 在浏览器中打开index.html

4. 允许摄像头权限

5. 开始手势控制剑阵

手势说明

可用手势

手势	剑阵模式	效果描述
🖐️ 张开手掌	莲花剑阵	飞剑呈螺旋莲花状排列，缓慢旋转
✊ 握拳	护盾阵型	飞剑形成球形防护罩环绕手势
🤘 摇滚手势	大庚剑阵	飞剑形成攻击性剑阵，中心主剑放大
👆 食指伸出	游龙随行	飞剑跟随手势轨迹形成游龙效果

操作提示

• 手势需要在摄像头视野内清晰可见

• 每种手势需要保持0.3秒以上才会切换模式

• 无手势时自动进入待机盘旋状态

技术架构

前端框架

• Vue.js：UI状态管理

• Three.js：3D图形渲染

• MediaPipe：手势识别AI

浏览器兼容性

• ✅ Chrome 90+（推荐）

• ✅ Firefox 88+

• ✅ Safari 14+

• ✅ Edge 90+

故障排除

常见问题

1. 摄像头无法启动

   • 检查浏览器权限设置

   • 确保没有其他应用占用摄像头

2. AI模型加载失败

   • 检查wasm/和models/目录文件是否完整

   • 查看浏览器控制台错误信息

3. 性能卡顿

   • 减少swordCount数量

   • 关闭其他占用GPU的应用

调试模式

打开浏览器开发者工具，查看控制台日志获取详细运行状态。

开发扩展

添加新剑阵模式

1. 在detectGesture函数中添加手势识别逻辑

2. 在updateColor中添加对应的UI文本

3. 在剑阵更新逻辑中实现新的排列算法