add babylonjs-gui and setupHandInteractivity

package-lock.json

@@ -30,6 +30,7 @@
       },
       "devDependencies": {
         "@babylonjs/core": "^5.29.0",
+        "@babylonjs/gui": "^5.35.1",
         "@types/google-protobuf": "^3.15.6",
         "@types/three": "^0.144.0",
         "@typescript-eslint/eslint-plugin": "^5.40.1",
@@ -1982,6 +1983,15 @@
       "integrity": "sha512-1gua7RJ52baX34R2uoO4HeF3l0y4s8nUU5BCbWkmDUPomqbBKaQE0nrvTHkrsHnwzdqZv8bO3Nb2h7SXsMesEA==",
       "dev": true
     },
+    "node_modules/@babylonjs/gui": {
+      "version": "5.35.1",
+      "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-5.35.1.tgz",
+      "integrity": "sha512-CuL32j07JNu4Jpa8y+lfoAecMR6mairpvmboAay6Bp2J1fYCNQesAYX60Xh8v6kFoFs2zjiEdrwMaQ6ykUzBPg==",
+      "dev": true,
+      "peerDependencies": {
+        "@babylonjs/core": "^5.22.0"
+      }
+    },
     "node_modules/@bcoe/v8-coverage": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
@@ -17056,6 +17066,13 @@
       "integrity": "sha512-1gua7RJ52baX34R2uoO4HeF3l0y4s8nUU5BCbWkmDUPomqbBKaQE0nrvTHkrsHnwzdqZv8bO3Nb2h7SXsMesEA==",
       "dev": true
     },
+    "@babylonjs/gui": {
+      "version": "5.35.1",
+      "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-5.35.1.tgz",
+      "integrity": "sha512-CuL32j07JNu4Jpa8y+lfoAecMR6mairpvmboAay6Bp2J1fYCNQesAYX60Xh8v6kFoFs2zjiEdrwMaQ6ykUzBPg==",
+      "dev": true,
+      "requires": {}
+    },
     "@bcoe/v8-coverage": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",

package.json

@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@babylonjs/core": "^5.29.0",
+    "@babylonjs/gui": "^5.35.1",
     "@types/google-protobuf": "^3.15.6",
     "@types/three": "^0.144.0",
     "@typescript-eslint/eslint-plugin": "^5.40.1",

src/config/ui.ts

@@ -61,6 +61,9 @@ export const HandHoverScaling = () => {
 export const HandHoverOutScaling = () => {
   return new BABYLON.Vector3(1, 1, 1);
 };
+export const HandInteractShape = () => {
+  return { width: 0.6, height: 0.3 };
+};
 
 // 怪兽区
 export const MonsterColor = () => {

src/ui/Duel/simpleDuel/hands.ts

 import * as BABYLON from "@babylonjs/core";
+import * as BABYLON_GUI from "@babylonjs/gui";
 import * as CONFIG from "../../../config/ui";
 import { Card } from "../../../reducers/duel/util";
 
@@ -14,6 +15,8 @@ export default (hands: Card[], scene: BABYLON.Scene) => {
     setupHandTransform(hand, item);
     // 材质
     setupHandMaterial(hand, item, scene);
+    // 互动选项
+    setupHandInteractivity(hand, item, idx, scene);
     // 事件管理
     setupHandAction(hand, item, idx, scene);
   });
@@ -49,6 +52,37 @@ function setupHandMaterial(
   mesh.material = handMaterial;
 }
 
+function setupHandInteractivity(
+  mesh: BABYLON.Mesh,
+  state: Card,
+  handIdx: number,
+  scene: BABYLON.Scene
+) {
+  const interactShape = CONFIG.HandInteractShape();
+  const interact = BABYLON.MeshBuilder.CreatePlane(
+    `handInteract${handIdx}`,
+    interactShape,
+    scene
+  );
+  interact.parent = mesh;
+  interact.position.x = CONFIG.HandShape().width / 2 + interactShape.width / 2;
+
+  const advancedTexture =
+    BABYLON_GUI.AdvancedDynamicTexture.CreateForMesh(interact);
+  const button = BABYLON_GUI.Button.CreateSimpleButton(
+    `handInteractButtion${handIdx}`,
+    "test"
+  );
+  button.width = interactShape.width;
+  button.height = interactShape.height;
+  button.fontSize = 200;
+  button.background = "gray";
+  button.onPointerClickObservable.add(() => {
+    alert(`<Interact>hand ${handIdx}`);
+  });
+  advancedTexture.addControl(button);
+}
+
 function setupHandAction(
   mesh: BABYLON.Mesh,
   state: Card,