项目源码：
「剑阵网页」
链接：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 # 手势识别模型
启动步骤
将项目文件放置在Web服务器中
确保
asset/、wasm/、models/目录结构正确在浏览器中打开
index.html允许摄像头权限
开始手势控制剑阵
手势说明
可用手势
手势
剑阵模式
效果描述
🖐️ 张开手掌
莲花剑阵
飞剑呈螺旋莲花状排列，缓慢旋转
✊ 握拳
护盾阵型
飞剑形成球形防护罩环绕手势
🤘 摇滚手势
大庚剑阵
飞剑形成攻击性剑阵，中心主剑放大
👆 食指伸出
游龙随行
飞剑跟随手势轨迹形成游龙效果
操作提示
手势需要在摄像头视野内清晰可见
每种手势需要保持0.3秒以上才会切换模式
无手势时自动进入待机盘旋状态
技术架构
前端框架
Vue.js：UI状态管理
Three.js：3D图形渲染
MediaPipe：手势识别AI
浏览器兼容性
✅ Chrome 90+（推荐）
✅ Firefox 88+
✅ Safari 14+
✅ Edge 90+
故障排除
常见问题
摄像头无法启动
检查浏览器权限设置
确保没有其他应用占用摄像头
AI模型加载失败
检查
wasm/和models/目录文件是否完整查看浏览器控制台错误信息
性能卡顿
减少
swordCount数量关闭其他占用GPU的应用
调试模式
打开浏览器开发者工具，查看控制台日志获取详细运行状态。
开发扩展
添加新剑阵模式
在
detectGesture函数中添加手势识别逻辑在
updateColor中添加对应的UI文本在剑阵更新逻辑中实现新的排列算法
