手势控制

如何创建新手势控制场景

<!-- 引入依赖 -->
<script src="https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js"></script>
<script src="gesture-scene.js"></script>

<script>
// 定义你的物体类，只需实现两个方法
class MyObject {
  constructor(x, y, vx, vy) {
    // 创建 Three.js 几何体和材质
    const geometry = new THREE.SphereGeometry(10, 16, 16);
    const material = new THREE.MeshBasicMaterial({
      color: new THREE.Color().setHSL(0.5, 0.8, 0.6),
      transparent: true,
      opacity: 1.0,
    });
    
    // 创建网格
    this.mesh = new THREE.Mesh(geometry, material);
    this.mesh.position.set(x, y, 0);
    this.alpha = 1.0;
  }
  
  update() {
    // 更新位置、状态
    this.mesh.position.x += this.vx;
    this.mesh.position.y += this.vy;
    this.alpha -= 0.01;
    this.mesh.material.opacity = Math.max(this.alpha, 0);
  }
  
  isDead() {
    // 返回 true 表示物体已消失
    return this.alpha <= 0;
  }
}

// 创建场景
const scene = new GestureScene({
  title: '我的手势控制',
  create: (x, y, vx, vy) => new MyObject(x, y, vx, vy),
  spawnRate: 3,      // 每帧生成数量
  burstRate: 10,     // 鼠标按下时的爆发数量
  maxObjects: 2000,  // 物体上限
  background: [0.02, 0.02, 0.05],  // 背景色 [r, g, b]
});
</script>