美丽新世界

20251230_手势控制图像滤镜

4分钟阅读

项目概览

hand-pose-ui是一个基于MediaPipe Hand Landmarker的前端原型项目，使用Next.js + React + React-Three-Fiber (R3F) 实现实时手势追踪，并将手部关键点数据抽象为可订阅的参数事件流。

该项目非常适合用于：

  • 手势 → 图像滤镜参数（曝光 / 饱和度 / 色温）
  • 手势 → 游戏内连续参数（亮度 / 强度 / 权重）
  • 手势 → AI / Function Calling 的高层指令输入

项目本身更像一个「输入层实验工具」，而不是完整产品。

核心价值

1. 省去手势样板工程

  • 已封装：摄像头接入 → 手部关键点检测 → 指标归一化
  • 直接获取结构化 metrics（距离、角度、朝向）

2. 参数天然连续

非常适合映射到：

  • Slider / Dial 类参数
  • 连续控制而非离散按钮

3. R3F 同栈

可直接嵌入现有 Three.js / R3F 场景，用于：

  • 环境变量（光照、雾、天气）
  • UI 可视化反馈
  • 游戏世界状态调制

项目地址

本地运行

git clone https://github.com/nohr/hand-pose-ui
cd hand-pose-ui
npm install
npm run dev

浏览器打开后授权摄像头即可体验。

示例：手势 → 滤镜参数映射

将「拇指与食指距离」映射为曝光，
将「食指偏航角」映射为色温。


handStream.on('frame', ({ metrics }) => {
  const thumbIndexDist = metrics.thumbIndexDistanceNorm; // 0 ~ 1
  const indexYaw = metrics.indexYaw; // -1 ~ 1

  const exposure = clamp(
    map(thumbIndexDist, 0.1, 0.6, -0.5, 1.0),
    -0.5,
    1.0
  );

  const colorTemp = clamp(
    map(indexYaw, -1, 1, 3500, 7500),
    3000,
    8000
  );

  const cmd = {
    fn: 'set_filter',
    params: { exposure, colorTemp }
  };

  fetch('/filter-endpoint', {
    method: 'POST',
    body: JSON.stringify(cmd)
  });
});

function map(x, inMin, inMax, outMin, outMax) {
  return ((x - inMin) / (inMax - inMin)) * (outMax - outMin) + outMin;
}

function clamp(v, min, max) {
  return Math.min(max, Math.max(min, v));
}

设计建议（非常重要）

1. 去抖与平滑

  • 对 metrics 使用滑动平均（EMA）

  • 否则参数抖动会极其明显

2. Dead Zone（死区）

  • 小幅手指抖动不应触发参数变化

  • 提高可控性与稳定感

3. 参数语义层

不直接暴露 raw 参数，而是包装为：

  • 拨轮（Dial）

  • 拉杆（Lever）

  • 确认 / 取消手势

4. 可视化反馈

  • R3F HUD 条

  • 数值刻度

  • 状态颜色变化

这是“可用”和“好用”的分水岭。

在 AI × Games 中的潜力

输入层升级

手势不是“控制角色”，而是：

  • 调制世界参数

  • 调整 AI 权重

  • 发布模糊但连续的领导意图

适合的使用方式

  • 领导者姿态：调高 / 压低某种倾向

  • 世界拨杆：经济 / 军事 / 信仰权重

  • 情绪输入：张开 / 收紧 / 指向

关系图谱