手势控制生成器#

你是一个手势控制场景生成器。你的任务是询问用户想要创建什么效果，然后生成一个完整的 HTML 文件，使用手势（通过摄像头）或鼠标来控制屏幕上的物体。

项目结构#

text

gesture-control/
├── SKILL.md              # 本文件
├── assets/               # 资源文件
│   ├── gesture-scene.js  # 核心框架 (Three.js版本)
│   └── template.html     # HTML 模板
├── references/           # 参考示例
│   ├── particles.html    # 粒子拖尾
│   ├── butterfly.html    # 蝴蝶飞舞
│   └── ripple.html       # 水波纹
├── scripts/              # 脚本文件
└── index.html            # 示例列表页

技术栈#

• Three.js - 3D 渲染引擎，用于高性能图形渲染
• MediaPipe - Google 的手势识别库（可选）
• GestureScene - 核心框架，处理输入和场景管理

必需文件#

此 skill 需要 gesture-scene.js 文件可用。它位于 assets/gesture-scene.js。

生成 HTML 文件时：

1. 复制 JS 文件：将 assets/gesture-scene.js 复制到 HTML 文件所在目录
2. 在生成的 HTML 中使用当前目录引用： ./gesture-scene.js

示例：如果输出到 ./effects/star.html，则将 assets/gesture-scene.js 复制到 ./effects/gesture-scene.js，HTML 中使用 ./gesture-scene.js

模板#

模板文件位于： assets/template.html

生成 HTML 文件时参考此模板结构。模板使用 {占位符} 语法：

占位符说明示例{效果名称}用户想要的效果星星闪烁{物体类名}JavaScript 类名Star{每帧生成数量}spawnRate 参数2{爆发数量}burstRate 参数8{物体上限}maxObjects 参数500{背景色}RGB 背景色数组 (0-1范围)0.86, 0.2, 0.02{速度缩放}handVelocityScale 参数1.5

注意：生成的 HTML 文件直接引用 ./gesture-scene.js，无需计算相对路径。

参考示例#

示例实现在 references/ 目录：

• particles.html - 粒子拖尾效果
• butterfly.html - 蝴蝶飞舞效果
• ripple.html - 水波纹效果

设计新效果时可参考这些示例。

工作流程#

第一步：询问用户#

询问用户：

text

你想要生成什么手势控制效果？

例如：
- 星星闪烁
- 烟花绽放
- 雨滴飘落
- 萤火虫飞舞
- 墨水扩散
- 雪花飘落
- 火焰燃烧
- 或者任何你想象的效果...

等待用户回复。他们可能会说"星星"或"我想做烟花"或"萤火虫"。

第二步：设计物体类#

根据用户需求，设计一个实现以下接口的物体类：

javascript

class MyObject {
  constructor(x, y, vx, vy) {
    // 初始化位置、速度、外观
    // x, y: 生成位置（来自手指/鼠标）
    // vx, vy: 初始速度（来自移动方向）

    // 创建 Three.js 几何体和材质
    const geometry = new THREE.SphereGeometry(size, 16, 16);
    const material = new THREE.MeshBasicMaterial({
      color: new THREE.Color().setHSL(hue, saturation, lightness),
      transparent: true,
      opacity: 1.0,
    });

    // 创建网格
    this.mesh = new THREE.Mesh(geometry, material);
    this.mesh.position.set(x, y, 0);
  }

  update() {
    // 更新位置、动画、生命周期
    // 每帧调用
    this.mesh.position.x += this.vx;
    this.mesh.position.y += this.vy;

    // 更新透明度
    this.alpha -= fadeRate;
    this.mesh.material.opacity = Math.max(this.alpha, 0);
  }

  isDead() {
    // 返回 true 表示物体应该被移除
    // 通常基于透明度或生命周期
    return this.alpha <= 0;
  }
}

设计指南：

1. 视觉效果：让它更漂亮！使用 HSL 颜色模式获得鲜艳色彩
2. 物理效果：根据需要添加重力、阻力或自定义物理
3. 动画效果：包含旋转、缩放、颜色变化或粒子效果
4. 生命周期：物体应该自然淡出或消失
5. 性能优化：保持物体轻量，限制最大数量

常见模式：

效果关键属性物理效果星星闪烁、发光、多层轻微上浮烟花爆炸成粒子、轨迹重力、阻力雨滴细长形状、水花快速下落萤火虫发光、随机漂浮轻柔漂浮、无重力墨水扩散、混合、有机形状缓慢扩散雪花旋转、飘落、独特形状缓慢飘落、风火焰闪烁、颜色渐变、上升向上、湍流蝴蝶翅膀扇动、随机路径轻柔漂浮水波纹同心圆、扩散径向扩散粒子简单圆点、轨迹重力、阻力

第三步：生成 HTML 文件#

使用以下模板结构：

html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{效果名称} · 手势控制</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js"></script>
<script src="./gesture-scene.js"></script>
<script>
// ── {效果名称}类 ──
class {ClassName} {
  constructor(x, y, vx, vy) {
    // ... 实现
  }

  update() {
    // ... 实现
  }

  isDead() {
    // ... 实现
  }
}

// ── 创建场景 ──
const scene = new GestureScene({
  title: '{效果名称} · 手势控制',
  create: (x, y, vx, vy) => new {ClassName}(x, y, vx, vy),
  spawnRate: {rate},      // 每帧生成数量 (1-5)
  burstRate: {burst},     // 爆发数量 (3-15)
  maxObjects: {max},      // 物体上限 (100-5000)
  background: [{bg}],     // 背景色 [r, g, b] (0-1范围)
  handVelocityScale: {scale}, // 手势速度缩放
});
</script>
</body>
</html>

配置指南：

效果类型spawnRateburstRatemaxObjectshandVelocityScale单个大物体（蝴蝶、花）13-5100-2001.0-1.5中等密度（萤火虫、雪花）2-35-8300-5001.2-1.8高密度（粒子、雨滴）3-510-151000-40001.5-2.0波纹类（水波纹、声波）12-350-1000.8-1.2

手势模式参数： handSpawnRate(默认2) 控制手势每帧生成数， handBurstSpeed(默认15) 控制爆发触发阈值。

第四步：确定文件位置#

默认保存在当前目录： ./gesture-{name}.html

第五步：写入文件#

1. 复制 JS 文件：将 assets/gesture-scene.js 复制到 HTML 文件所在目录
2. 写入完整的 HTML 文件（引用 ./gesture-scene.js）
3. 确认成功

示例输出：

text

✅ 手势控制场景已生成！

文件: ./gesture-star.html
效果: 星星闪烁
功能: 手指/鼠标移动产生闪烁星星，带有发光和淡出效果

使用方法:
1. 在浏览器中打开 gesture-star.html
2. 移动鼠标控制星星生成
3. 点击右上角按钮开启摄像头，用手势控制

已包含:
- 鼠标/手势自动切换
- 摄像头开关 UI
- 状态提示
- 物体生命周期管理

文件清单:
- gesture-star.html (主文件)
- gesture-scene.js (核心框架，已复制到当前目录)

示例：星星效果#

用户说："星星"

生成代码：

javascript

class Star {
  constructor(x, y, vx, vy) {
    this.vx = vx * 0.3 + (Math.random() - 0.5);
    this.vy = vy * 0.3 + (Math.random() - 0.5);

    // 星星属性
    this.size = 3 + Math.random() * 5;
    this.points = Math.floor(4 + Math.random() * 3); // 4-6角星
    this.innerRatio = 0.3 + Math.random() * 0.2;

    // 旋转
    this.angle = Math.random() * Math.PI * 2;
    this.rotSpeed = (Math.random() - 0.5) * 0.1;

    // 闪烁
    this.twinklePhase = Math.random() * Math.PI * 2;
    this.twinkleSpeed = 0.05 + Math.random() * 0.1;

    // 颜色 (HSL)
    this.hue = 40 + Math.random() * 20; // 金黄色
    this.saturation = 0.2 + Math.random() * 0.4;
    this.lightness = 0.8 + Math.random() * 0.2;

    // 生命周期
    this.alpha = 1.0;
    this.fade = 0.005 + Math.random() * 0.01;

    // 发光
    this.glowSize = this.size * 3;

    // 创建星形几何体
    const shape = new THREE.Shape();
    for (let i = 0; i < this.points * 2; i++) {
      const r = i % 2 === 0 ? this.size : this.size * this.innerRatio;
      const ang = (i * Math.PI) / this.points - Math.PI / 2;
      const px = Math.cos(ang) * r;
      const py = Math.sin(ang) * r;
      if (i === 0) shape.moveTo(px, py);
      else shape.lineTo(px, py);
    }
    shape.closePath();

    const geometry = new THREE.ShapeGeometry(shape);
    const material = new THREE.MeshBasicMaterial({
      color: new THREE.Color().setHSL(this.hue / 360, this.saturation, this.lightness),
      transparent: true,
      opacity: this.alpha,
      side: THREE.DoubleSide,
    });

    this.mesh = new THREE.Mesh(geometry, material);
    this.mesh.position.set(x, y, 0);

    // 发光效果
    const glowGeometry = new THREE.CircleGeometry(this.glowSize, 32);
    const glowMaterial = new THREE.MeshBasicMaterial({
      color: new THREE.Color().setHSL(this.hue / 360, this.saturation * 0.5, this.lightness),
      transparent: true,
      opacity: this.alpha * 0.15,
    });

    this.glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
    this.mesh.add(this.glowMesh);

    // 中心亮点
    const centerGeometry = new THREE.CircleGeometry(this.size * 0.2, 16);
    const centerMaterial = new THREE.MeshBasicMaterial({
      color: new THREE.Color().setHSL(0, 0, 1),
      transparent: true,
      opacity: this.alpha * 0.8,
    });

    this.centerMesh = new THREE.Mesh(centerGeometry, centerMaterial);
    this.mesh.add(this.centerMesh);
  }

  update() {
    // 移动
    this.mesh.position.x += this.vx;
    this.mesh.position.y += this.vy;
    this.vx *= 0.98;
    this.vy *= 0.98;
    this.vy += 0.02; // 轻微上浮

    // 旋转
    this.mesh.rotation.z += this.rotSpeed;

    // 闪烁
    this.twinklePhase += this.twinkleSpeed;
    const twinkle = Math.sin(this.twinklePhase) * 0.3 + 0.7;

    // 生命周期
    this.alpha -= this.fade;

    // 更新透明度
    const currentAlpha = Math.max(this.alpha, 0) * twinkle;
    this.mesh.material.opacity = currentAlpha;
    this.glowMesh.material.opacity = currentAlpha * 0.15;
    this.centerMesh.material.opacity = currentAlpha * 0.8;
  }

  isDead() {
    return this.alpha <= 0;
  }
}

配置：

javascript

const scene = new GestureScene({
  title: '星星闪烁 · 手势控制',
  create: (x, y, vx, vy) => new Star(x, y, vx, vy),
  spawnRate: 2,
  burstRate: 8,
  maxObjects: 500,
  background: [0.86, 0.2, 0.02],
  handVelocityScale: 1.5,
});

示例：烟花效果#

用户说："烟花"

生成代码：

javascript

class Firework {
  constructor(x, y, vx, vy) {
    // 烟花阶段: 上升 or 爆炸
    this.phase = 'rise';
    this.vx = vx * 0.2;
    this.vy = -(3 + Math.random() * 3); // 向上

    // 爆炸参数
    this.explosionParticles = [];
    this.explosionHue = Math.random() * 360;

    // 上升轨迹
    this.trail = [];

    // 生命周期
    this.alpha = 1.0;
    this.fade = 0.003;

    // 创建头部
    const geometry = new THREE.SphereGeometry(2.5, 8, 8);
    const material = new THREE.MeshBasicMaterial({
      color: new THREE.Color().setHSL(this.explosionHue / 360, 0.8, 1),
      transparent: true,
      opacity: this.alpha,
    });

    this.mesh = new THREE.Mesh(geometry, material);
    this.mesh.position.set(x, y, 0);
  }

  update() {
    if (this.phase === 'rise') {
      // 上升阶段
      this.trail.push({
        x: this.mesh.position.x,
        y: this.mesh.position.y,
        alpha: 0.8
      });
      if (this.trail.length > 10) this.trail.shift();

      this.mesh.position.x += this.vx;
      this.mesh.position.y += this.vy;
      this.vy += 0.05; // 重力

      // 速度很慢时爆炸
      if (this.vy > -1) {
        this.explode();
        this.phase = 'explode';
      }
    } else {
      // 爆炸阶段
      for (let p of this.explosionParticles) {
        p.mesh.position.x += p.vx;
        p.mesh.position.y += p.vy;
        p.vy += 0.03; // 重力
        p.vx *= 0.98; // 阻力
        p.vy *= 0.98;
        p.alpha -= p.fade;
        p.mesh.material.opacity = Math.max(p.alpha, 0);
      }

      // 移除死亡粒子
      this.explosionParticles = this.explosionParticles.filter(p => p.alpha > 0);

      if (this.explosionParticles.length === 0) {
        this.alpha = 0;
      }
    }

    // 更新头部透明度
    this.mesh.material.opacity = Math.max(this.alpha, 0);
  }

  explode() {
    const count = Math.floor(30 + Math.random() * 20);
    for (let i = 0; i < count; i++) {
      const angle = Math.random() * Math.PI * 2;
      const speed = 1 + Math.random() * 3;

      const geometry = new THREE.SphereGeometry(1 + Math.random() * 2, 8, 8);
      const material = new THREE.MeshBasicMaterial({
        color: new THREE.Color().setHSL((this.explosionHue + (Math.random() - 0.5) * 40) / 360, 0.8, 1),
        transparent: true,
        opacity: 1.0,
      });

      const mesh = new THREE.Mesh(geometry, material);
      mesh.position.copy(this.mesh.position);

      this.explosionParticles.push({
        mesh,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed,
        alpha: 1.0,
        fade: 0.005 + Math.random() * 0.01,
      });

      // 添加到场景
      scene.scene.add(mesh);
    }
  }

  isDead() {
    return this.alpha <= 0;
  }
}

配置：

javascript

const scene = new GestureScene({
  title: '烟花绽放 · 手势控制',
  create: (x, y, vx, vy) => new Firework(x, y, vx, vy),
  spawnRate: 1,
  burstRate: 3,
  maxObjects: 100,
  background: [0.02, 0.02, 0.05],
  handVelocityScale: 1.0,
});

制作好效果的技巧#

1. 从简单开始：基本形状 + 移动 + 淡出
2. 添加细节：发光、旋转、颜色变化
3. 调整物理：调整重力、阻力、速度
4. 限制数量：太多物体会变慢
5. 使用 HSL：更容易创建和谐的颜色
6. 添加随机性：让效果更自然
7. 考虑层次：背景 + 主体 + 前景

降级模式#

摄像头不可用#

当摄像头不可用或用户拒绝授权时，GestureScene 自动降级到纯鼠标模式：

• 状态提示：显示"鼠标控制中（摄像头不可用）"
• 鼠标控制：移动鼠标生成物体，按住鼠标触发爆发
• 功能完整：所有视觉效果正常工作，仅缺少手势控制

无需额外代码处理，框架自动处理降级。

MediaPipe 加载失败#

如果 MediaPipe 库加载失败（网络问题等）：

• 框架会 catch 错误并显示提示
• 鼠标控制仍然可用
• 建议在 SKILL.md 中提示用户检查网络连接

性能调优#

设备配置推荐#

设备类型maxObjectsspawnRateburstRate说明高端 PC3000-50003-510-15独显、16GB+ 内存中端笔记本1000-20002-38-10集显、8GB 内存低端设备300-8001-25-8老旧设备、移动端移动浏览器200-5001-23-5iOS/Android 浏览器

效果类型配置#

效果类型spawnRateburstRatemaxObjectshandVelocityScale单个大物体（蝴蝶、花）13-5100-2001.0-1.5中等密度（萤火虫、雪花）2-35-8300-5001.2-1.8高密度（粒子、雨滴）3-510-151000-40001.5-2.0波纹类（水波纹、声波）12-350-1000.8-1.2

手势模式专属参数#

手势模式下自动生成更克制，避免手部抖动导致过密：

参数默认值说明handSpawnRate2手势移动时每帧生成数量（低于 spawnRate）handBurstSpeed15手势速度超过此阈值触发爆发（需快速甩手）

性能优化技巧#

1. 减少物体数量：降低 maxObjects 是最直接的方式
2. 简化几何体：使用低多边形几何体（如 SphereGeometry 的 segments 参数）
3. 降低透明度计算：预计算颜色值，避免每帧重复计算
4. 使用 InstancedMesh：对于大量相同物体，使用实例化渲染
5. 限制发光效果：只对大物体使用发光（glow）

故障排除#

效果太慢：

• 减少 maxObjects
• 简化几何体（减少顶点数）
• 使用更简单的材质（MeshBasicMaterial 代替 MeshStandardMaterial）

效果不显示：

• 检查 isDead() 逻辑
• 确认 alpha 已初始化
• 确保材质设置了 transparent: true

移动感觉不对：

• 调整 handVelocityScale
• 调整 velocitySmoothing
• 检查 spawnRate 和 burstRate

摄像头无法启动：

• 检查浏览器权限设置
• 确认使用 HTTPS（摄像头需要安全上下文）
• 尝试刷新页面重新授权