AI + WebGL + 实时手势识别
GESTURE
GALAXY
基于 MediaPipe 与 Three.js 构建的沉浸式无接触交互体验
张开手掌，操控十万粒子银河；挥手之间，探索数字艺术空间 👋
向下滚动探索
CORE FEATURES
四大核心功能
融合AI视觉、GPU渲染与流畅动画，打造下一代Web交互体验
手势识别
MediaPipe Hands 实时检测手部21个关键点
- 状态机识别静态/动态手势
- 智能防抖与冷却机制
- 置信度阈值防误触
星空粒子系统
GPU加速渲染十万级粒子银河效果
- Bloom泛光与星云效果
- 流星划过动画
- 手势控制旋转与聚散
图片展示
手势触发图片中央渐显，自然优雅
- 内置分类图片资源库
- Shuffle随机队列防重复
- GSAP驱动丝滑过渡
动画系统
Shader驱动粒子运动，场景丝滑联动
- GSAP专业级动画库
- 相机缓动跟随
- 60fps流畅渲染
TECH STACK
前沿技术栈
采用业界领先的Web技术栈，确保性能与体验的完美平衡
渐进式框架
极速构建
WebGL渲染
AI手势识别
动画引擎
状态管理
GPU着色器
硬件加速
USE CASES
多元应用场景
从展厅互动到艺术展示，Gesture Galaxy 适配多种创意场景
🏛️
张开手掌
展厅互动
图片渐显展示
🎨
左右挥手
艺术展示
星空旋转舞动
📸
连续交互
摄影展示
随机切换照片
🎮
多种手势
创意体验
粒子实时响应
INNOVATION
五大创新特色
技术与艺术的深度融合，重新定义Web交互边界
01
AI手势驱动三维粒子实时运动
02
GPU Shader 渲染璀璨星空
03
图片与粒子融合动画效果
04
完全无接触自然交互体验
05
艺术展示与前沿技术结合
ROADMAP
开发里程碑
从基础框架到完整体验，稳步推进产品迭代
PHASE 01 · MVP
项目框架与Three.js场景
搭建Vue3+Vite基础架构，初始化Three.js 3D场景，完成基础星空粒子渲染。
PHASE 02
MediaPipe接入与手势识别
集成MediaPipe Hands，实现21个关键点检测，搭建手势状态机与防抖机制。
PHASE 03
图片展示与动画系统
实现图片资源管理、预加载机制，集成GSAP完成渐显渐隐等交互动画。
PHASE 04 · Beta
粒子联动与性能优化
完成手势与粒子系统联动，实现Shader特效，优化至5-10万粒子流畅渲染。
PHASE 05 · Release
测试部署与文档整理
浏览器兼容性测试，主题切换功能，性能调优，完成部署与项目文档。