在WebGL场景中管理多个卡牌对象的实践

2024-02-06 00:41:46

当然，我很乐意根据您的输入生成一篇专业级别的文章。以下是您想要的文章：

在基于Babylon.js的WebGL场景中，管理多个卡牌对象的显示、选择、分组、排序，是一项常见的需求。这篇文章将介绍如何实现这些功能，并建立一套实用的3D场景代码框架。

1. 场景设置

首先，我们需要创建一个新的Babylon.js场景，并添加一个灯光和一个相机。

// 创建场景
const scene = new BABYLON.Scene(engine);

// 添加灯光
const light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -1, 0), scene);

// 添加相机
const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 4, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

2. 创建卡牌对象

接下来，我们需要创建一组卡牌对象。我们使用Babylon.js的Mesh类来创建这些对象。

// 创建卡牌网格
const cardMesh = BABYLON.MeshBuilder.CreatePlane("card", {width: 1, height: 1.5}, scene);

// 设置卡牌材质
const cardMaterial = new BABYLON.StandardMaterial("cardMaterial", scene);
cardMaterial.diffuseTexture = new BABYLON.Texture("cardTexture.png", scene);

// 应用材质
cardMesh.material = cardMaterial;

3. 显示卡牌对象

现在，我们可以将卡牌对象添加到场景中，并将其放置在适当的位置。

// 创建卡牌组
const cardGroup = new BABYLON.Group("cardGroup", scene);

// 创建多张卡牌
for (let i = 0; i < 10; i++) {
  const cardInstance = cardMesh.createInstance("cardInstance" + i);
  cardInstance.position.set(i * 2, 0, 0);
  cardGroup.add(cardInstance);
}

4. 选择卡牌对象

当用户点击卡牌对象时，我们需要将其选中。我们可以使用Babylon.js的Picking功能来实现这一点。

// 启用拾取
scene.enablePointerPick(true);

// 添加拾取事件监听器
scene.onPointerObservable.add((pointerInfo) => {
  if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {
    const pickInfo = scene.pick(pointerInfo.pickInfo.pickedPoint);
    if (pickInfo.pickedMesh && pickInfo.pickedMesh.name.startsWith("cardInstance")) {
      // 卡牌被选中
      const cardInstance = pickInfo.pickedMesh;
      cardInstance.material.diffuseColor = BABYLON.Color3.Red();
    }
  }
});

5. 分组卡牌对象

我们可以将卡牌对象分组，以便更容易地管理它们。Babylon.js的Group类可以用于此目的。

// 创建卡牌组
const cardGroup1 = new BABYLON.Group("cardGroup1", scene);
const cardGroup2 = new BABYLON.Group("cardGroup2", scene);

// 将卡牌对象添加到组中
cardGroup1.add(cardInstance1);
cardGroup1.add(cardInstance2);
cardGroup2.add(cardInstance3);
cardGroup2.add(cardInstance4);

6. 排序卡牌对象

我们可以使用Babylon.js的SortingGroup类来对卡牌对象进行排序。

// 创建排序组
const sortingGroup = new BABYLON.SortingGroup("sortingGroup", scene);

// 将卡牌对象添加到排序组中
cardInstance1.renderingGroupId = sortingGroup.id;
cardInstance2.renderingGroupId = sortingGroup.id;
cardInstance3.renderingGroupId = sortingGroup.id;
cardInstance4.renderingGroupId = sortingGroup.id;

// 设置排序模式
sortingGroup.alphaTest = true;

7. 代码框架

最后，我们将介绍如何建立一套实用的3D场景代码框架。

// 创建场景
const scene = new BABYLON.Scene(engine);

// 添加灯光和相机
const light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -1, 0), scene);
const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 4, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

// 创建卡牌网格和材质
const cardMesh = BABYLON.MeshBuilder.CreatePlane("card", {width: 1, height: 1.5}, scene);
const cardMaterial = new BABYLON.StandardMaterial("cardMaterial", scene);
cardMaterial.diffuseTexture = new BABYLON.Texture("cardTexture.png", scene);

// 创建卡牌组
const cardGroup = new BABYLON.Group("cardGroup", scene);

// 创建多张卡牌
for (let i = 0; i < 10; i++) {
  const cardInstance = cardMesh.createInstance("cardInstance" + i);
  cardInstance.position.set(i * 2, 0, 0);
  cardGroup.add(cardInstance);
}

// 启用拾取并添加拾取事件监听器
scene.enablePointerPick(true);
scene.onPointerObservable.add((pointerInfo) => {
  if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {
    const pickInfo = scene.pick(pointerInfo.pickInfo.pickedPoint);
    if (pickInfo.pickedMesh && pickInfo.pickedMesh.name.startsWith("cardInstance")) {
      const cardInstance = pickInfo.pickedMesh;
      cardInstance.material.diffuseColor = BABYLON.Color3.Red();
    }
  }
});

// 创建卡牌组并添加卡牌对象
const cardGroup1 = new BABYLON.Group("cardGroup1", scene);
const cardGroup2 = new BABYLON.Group("cardGroup2", scene);
cardGroup1.add(cardInstance1);
cardGroup1.add(cardInstance2);
cardGroup2.add(cardInstance3);
cardGroup2.add(cardInstance4);

// 创建排序组并添加卡牌对象
const sortingGroup = new BABYLON.SortingGroup("sortingGroup", scene);
cardInstance1.renderingGroupId = sortingGroup.id;
cardInstance2.renderingGroupId = sortingGroup.id;
cardInstance3.renderingGroupId = sortingGroup.id;
cardInstance4.renderingGroupId = sortingGroup.id;
sortingGroup.alphaTest = true;

// 渲染场景
engine.runRenderLoop(() => {
  scene.render();
});