在 WebGL 场景中探索棋盘操作实验：创造交互式 3D 游戏体验

2023-12-27 19:49:48

WebGL 场景中的棋盘操作实验

随着 WebGL 技术的蓬勃发展，基于 WebGL 的 3D 场景应用不断涌现，为用户提供了身临其境的交互体验。在这篇文章中，我们将深入探索如何在 WebGL 场景中构建一个棋盘游戏，实现棋子移动和范围显示功能。我们将使用 Babylon.js 作为 WebGL 场景框架，它提供了强大的工具集和社区支持，方便我们快速构建复杂的三维场景。

构建棋盘地块

首先，我们需要在场景中建立棋盘地块。我们可以使用 Babylon.js 中的 Plane 对象来创建矩形平面，并将其作为每个地块的基底。通过循环嵌套的方式，我们可以轻松地生成一个由多个地块组成的棋盘。为了区分不同地块，我们可以为其赋予不同的颜色或纹理。

// 创建一个 8x8 的棋盘
for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    // 计算每个地块的位置
    const x = i * 100;
    const y = 0;
    const z = j * 100;

    // 创建地块平面
    const plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 100, height: 100}, scene);
    plane.position.set(x, y, z);

    // 设置地块颜色
    const color = (i + j) % 2 === 0 ? "white" : "black";
    plane.material = new BABYLON.StandardMaterial("material", scene);
    plane.material.diffuseColor = new BABYLON.Color3.FromHexString(color);
  }
}

创建棋子对象

接下来，我们需要创建可供玩家选择的棋子对象。我们可以使用 Babylon.js 中的 Sphere 对象来创建球体作为棋子模型。类似于棋盘地块，我们可以通过循环的方式生成多个棋子，并赋予它们不同的颜色或纹理。

// 创建 16 个棋子，分为红蓝两组
for (let i = 0; i < 16; i++) {
  // 计算每个棋子的位置
  const x = (i % 2) * 100;
  const y = 50;
  const z = (Math.floor(i / 2) % 2) * 100;

  // 创建棋子球体
  const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 50}, scene);
  sphere.position.set(x, y, z);

  // 设置棋子颜色
  const color = i < 8 ? "red" : "blue";
  sphere.material = new BABYLON.StandardMaterial("material", scene);
  sphere.material.diffuseColor = new BABYLON.Color3.FromHexString(color);
}

显示棋子移动范围

为了方便玩家选择棋子并进行移动，我们需要显示棋子的移动范围。我们可以使用 Babylon.js 中的 GlowLayer 对象来创建发光效果，并将其应用到棋子周围的网格上。当玩家点选某个棋子时，我们可以根据棋子的规则高亮显示其可移动范围内的地块。

// 创建发光层
const glowLayer = new BABYLON.GlowLayer("glowLayer", scene);

// 当点击棋子时，显示其移动范围
scene.onPointerDown = (event) => {
  // 获取被点击的对象
  const pickedMesh = scene.pick(event.clientX, event.clientY);

  // 如果点击了棋子
  if (pickedMesh && pickedMesh.name.indexOf("sphere") !== -1) {
    // 计算棋子的移动范围
    const moves = getPossibleMoves(pickedMesh.position);

    // 高亮显示移动范围内的地块
    for (const move of moves) {
      const glowMesh = BABYLON.MeshBuilder.CreatePlane("glow", {width: 100, height: 100}, scene);
      glowMesh.position.set(move.x, 0.1, move.z);
      glowMesh.material = new BABYLON.StandardMaterial("material", scene);
      glowMesh.material.emissiveColor = new BABYLON.Color3.FromHexString("#FFFF00");
      glowMesh.layerMask = glowLayer.id;
    }
  }
};

移动棋子

当玩家点击棋子移动范围内的空白地块时，我们需要将棋子移动到目标地块。我们可以通过更新棋子对象的 position 属性来实现移动。

// 当点击移动范围内的空白地块时，移动棋子
scene.onPointerDown = (event) => {
  // 获取被点击的对象
  const pickedMesh = scene.pick(event.clientX, event.clientY);

  // 如果点击了空白地块
  if (pickedMesh && pickedMesh.name.indexOf("plane") !== -1 && pickedMesh.material.diffuseColor.equals(BABYLON.Color3.White())) {
    // 获取被点击地块的位置
    const targetPosition = pickedMesh.position;

    // 获取当前选中的棋子
    const selectedMesh = scene.meshes.find((mesh) => mesh.name.indexOf("sphere") !== -1 && mesh.material.emissiveColor.equals(BABYLON.Color3.Yellow()));

    // 如果有选中的棋子，则移动棋子
    if (selectedMesh) {
      // 更新棋子的位置
      selectedMesh.position = targetPosition;

      // 清除棋子的移动范围高亮
      glowLayer.meshes.forEach((mesh) => mesh.dispose());
    }
  }
};