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  # 手势识别模型

启动步骤

手势说明

可用手势

手势

剑阵模式

效果描述

操作提示

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

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

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

技术架构

前端框架

• Vue.js：UI状态管理

• Three.js：3D图形渲染

• MediaPipe：手势识别AI

浏览器兼容性

• ✅ Chrome 90+（推荐）

• ✅ Firefox 88+

• ✅ Safari 14+

• ✅ Edge 90+

故障排除

常见问题

调试模式

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

开发扩展

添加新剑阵模式