← 全部作品
05 · SEED ARK / GESTURE
05 / 交互装置 · 手势识别
种子方舟:用手势照料一片森林SEED ARK / GESTURE
用一只手在浏览器里种一片森林:张开手掌让种子萌发,握拳让它枯萎,食指指向进入生态面板,双手张开汇入季风。所有推理在本机完成,画面不上传服务器。
01 / SEED ARK
把遥控器换掉
大多数手势交互做成了遥控器:挥手切页、比心点赞。这里想让手势承担更慢的动作——照料。张开是给它空间,握拳是让它休眠,托住是搬动,两只手一起才是天气。动作越慢,反馈越要稳,所以整个系统把“识别延迟”当成第一优先级的敌人。
02 / SEED ARK
手势语法
六种手势对应六种照料动作,每一种都有明确的视觉反馈,避免“手比了但画面没反应”的挫败感。
03 / SEED ARK
场景与读数
主场景叫“种子萌发”,HUD 只留三组读数:生长势能、风速、帧率。读数越少,观众越愿意动手;读数太多,注意力就从植株转移到数字上。
04 / SEED ARK
离线与隐私
摄像头画面只在浏览器内存里流转,不经过任何服务器;推理在本地 WASM 中完成。没有摄像头或不想授权时,可以切到自动演示模式,画面照样完整——这是给答辩和录屏准备的降级路径。
SPEC
实现细节
- 识别
- MediaPipe Hands,单帧提取手部关键点与手势分类
- 渲染
- Three.js 场景 + 粒子系统,手势驱动生长参数
- 推理
- 本地 WASM,摄像头画面不出本机
- 降级
- 无摄像头 / 未授权时切换自动演示模式
- 音频
- Web Audio 生成环境音,随生长势能改变密度
在这台设备上试一下
需要摄像头权限;不想授权可点“自动演示模式”,无需相机也能看完整流程。
※ 浏览器要求在 https 或 localhost 下才能调用摄像头。