设计

本游戏是一个打字游戏，使用键盘敲出对应字母，就可以将木头人压下去，同时会出现一个新的木头人。每打掉5个木头人，将会有一个特效。

实现

首先设置场景

 renderer.setClearColor(new THREE.Color(0x001a31));
 // 地面纹理
     const texture = loader.load("./grass.png");
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

这个颜色是整个环境的背景色，代表这是晚上的天空。

同时也可以用scene的background设置，这个可以设置更加复杂的场景，不过本游戏的场景没有那么复杂。

地面纹理则使用了贴地板砖的方式，由于本人使用的花生壳穿透，速度较慢，不得不将纹理图片裁切小。

更新3d世界中各物体的状态

      Ground.update();
      Light.update();
      Camera.update();
      Bottle.update();

update方法屏蔽了接口的具体实现，以便可以进行很好的扩展。

木头人

 const basicMaterial = new THREE.MeshPhongMaterial({
      color: cryMaterial,
    });
    const head = new THREE.SphereGeometry(5, 32, 32);
    const body = new THREE.SphereGeometry(8, 32, 32);
    const headMesh = new THREE.Mesh(head, smileMaterial);
    const bodyMesh = new THREE.Mesh(body, basicMaterial);
    headMesh.position.y = 12;
    headMesh.rotation.y = 3.2;
    headMesh.name = "bottle";

木头人采用两个球体实现，使用了一个笑脸贴图，勾勒面部轮廓。头部应该在上面，所有y值对应有所提高，这个需要调参。

分数

        <div
          style={{
            position: "fixed",
            top: 10,
            zIndex: 99,
            left: 10,
            width: 200,
            color: "#1650af",
          }}
        >
          {this.state.count}
        </div>

左上角有一个分数显示。

监听

    const keyMap = {
        65: "A",
        66: "B",
        67: "C",
        68: "D",
        69: "E",
        70: "F",
        71: "G",
        72: "H",
        73: "I",
        74: "J",
        75: "K",
        76: "L",
        77: "M",
        78: "N",
        79: "O",
        80: "P",
        81: "Q",
        82: "R",
        83: "S",
        84: "T",
        85: "U",
        86: "V",
        87: "W",
        88: "X",
        89: "Y",
        90: "Z",
      };

本游戏监听了26各英文字母，当按下按键时，如果和随机生成的编码匹配，则会调用木头人的showUp方法。

 showup(x, y, z) {
    this.obj.visible = true;
    this.obj.position.z = z;
    customAnimation.to(this.obj.position, { y: -20 }, { y: 5 }, null, 1000);
    this.scene.remove(this.textMesh);
    this.genText(x, y, z);
  }

最后是粒子动画

 this.particles.scale.set(1, 1, 1);
    customAnimation.to(
      this.particles.position,
      { y: 30 },
      { y: 60 },
      "Linear",
      1000
    );
    customAnimation.to(
      this.particles.scale,
      { x: 0, y: 0, z: 0 },
      { x: 1, y: 1, z: 1 },
      "Linear",
      1000
    );
    customAnimation.to(
      this.particles.scale,
      { x: 1, y: 1, z: 1 },
      { x: 0, y: 0, z: 0 },
      null,
      2000
    );

这些粒子都是使用random()胡乱生成的，位置由地面升到天空，30到60，体积大小在第一秒由0到1，在第2秒则在0和1之间做钟摆运动，最后消失。

感谢阅读，欢迎体验点赞。【网速较慢】

小游戏: 消灭木头人

设计

实现

首先设置场景

更新3d世界中各物体的状态

木头人

分数

监听

最后是粒子动画