作品 关于
← 全部作品

05 / 交互装置 · 手势识别

种子方舟:用手势照料一片森林SEED ARK / GESTURE

用一只手在浏览器里种一片森林:张开手掌让种子萌发,握拳让它枯萎,食指指向进入生态面板,双手张开汇入季风。所有推理在本机完成,画面不上传服务器。

年份2026
类型交互装置 · 手势识别
职责概念 / 交互 / 实现
工具MediaPipe Hands · Three.js
种子方舟:用手势照料一片森林
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 下才能调用摄像头。