Merge branch 'feat/ui/hands/button' into 'main'

Feat/ui/hands/button

See merge request !36

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,10 @@ export const HandHoverScaling = () => {
 export const HandHoverOutScaling = () => {
   return new BABYLON.Vector3(1, 1, 1);
 };
+export const HandInteractShape = () => {
+  return { width: 0.4, height: 0.1 };
+};
+export const HandInteractFontSize = 300;
 
 // 怪兽区
 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";
 
@@ -10,70 +11,136 @@ export default (hands: Card[], scene: BABYLON.Scene) => {
       handShape,
       scene
     );
-    // 位置
-    hand.position = new BABYLON.Vector3(
-      item.transform.position?.x,
-      item.transform.position?.y,
-      item.transform.position?.z
-    );
-    hand.rotation = new BABYLON.Vector3(
-      item.transform.rotation?.x,
-      item.transform.rotation?.y,
-      item.transform.rotation?.z
-    );
+    // 位置&旋转
+    setupHandTransform(hand, item);
     // 材质
-    const handMaterial = new BABYLON.StandardMaterial("handMaterial", scene);
-    // 材质贴纸
-    handMaterial.diffuseTexture = new BABYLON.Texture(
-      `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${item.meta.id}.jpg`,
-      scene
-    );
-    hand.material = handMaterial;
-
+    setupHandMaterial(hand, item, scene);
+    // 互动选项
+    setupHandInteractivity(hand, item, idx, scene);
     // 事件管理
-    hand.actionManager = new BABYLON.ActionManager(scene);
-    // 监听点击事件
-    hand.actionManager.registerAction(
-      new BABYLON.ExecuteCodeAction(
-        BABYLON.ActionManager.OnPickTrigger,
-        (event) => {
-          console.log(`<Click>hand: ${idx}`, "card:", item, "event:", event);
-        }
-      )
-    );
-    // 监听`Hover`事件
-    hand.actionManager.registerAction(
-      new BABYLON.CombineAction(
-        { trigger: BABYLON.ActionManager.OnPointerOverTrigger },
-        [
-          new BABYLON.SetValueAction(
-            {
-              trigger: BABYLON.ActionManager.OnPointerOverTrigger,
-            },
-            hand,
-            "scaling",
-            CONFIG.HandHoverScaling()
-          ),
-          // TODO: 这里后续应该加上显示可操作按钮的处理
-          new BABYLON.ExecuteCodeAction(
-            BABYLON.ActionManager.OnPointerOverTrigger,
-            (event) => {
-              console.log(`<Hover>hand: ${idx}`, "event: ", event);
-            }
-          ),
-        ]
-      )
-    );
-    // 监听`Hover`离开事件
-    hand.actionManager.registerAction(
-      new BABYLON.SetValueAction(
-        {
-          trigger: BABYLON.ActionManager.OnPointerOutTrigger,
-        },
-        hand,
-        "scaling",
-        CONFIG.HandHoverOutScaling()
-      )
-    );
+    setupHandAction(hand, item, idx, scene);
   });
 };
+
+function setupHandTransform(mesh: BABYLON.Mesh, state: Card) {
+  mesh.position = new BABYLON.Vector3(
+    state.transform.position?.x,
+    state.transform.position?.y,
+    state.transform.position?.z
+  );
+  mesh.rotation = new BABYLON.Vector3(
+    state.transform.rotation?.x,
+    state.transform.rotation?.y,
+    state.transform.rotation?.z
+  );
+}
+
+function setupHandMaterial(
+  mesh: BABYLON.Mesh,
+  state: Card,
+  scene: BABYLON.Scene
+) {
+  const handMaterial = new BABYLON.StandardMaterial(
+    `handMaterial${state.meta.id}`,
+    scene
+  );
+  // 材质贴纸
+  handMaterial.diffuseTexture = new BABYLON.Texture(
+    `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.meta.id}.jpg`,
+    scene
+  );
+  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.fontSize = CONFIG.HandInteractFontSize;
+  button.background = "gray";
+  button.onPointerClickObservable.add(() => {
+    console.log(`<Interact>hand ${handIdx}`);
+  });
+  advancedTexture.addControl(button);
+}
+
+function setupHandAction(
+  mesh: BABYLON.Mesh,
+  state: Card,
+  handIdx: number,
+  scene: BABYLON.Scene
+) {
+  mesh.actionManager = new BABYLON.ActionManager(scene);
+  // 监听点击事件
+  mesh.actionManager.registerAction(
+    new BABYLON.ExecuteCodeAction(
+      BABYLON.ActionManager.OnPickTrigger,
+      (event) => {
+        console.log(`<Click>hand: ${handIdx}`, "card:", state, "event:", event);
+      }
+    )
+  );
+  // 监听`Hover`事件
+  mesh.actionManager.registerAction(
+    new BABYLON.CombineAction(
+      { trigger: BABYLON.ActionManager.OnPointerOverTrigger },
+      [
+        new BABYLON.SetValueAction(
+          {
+            trigger: BABYLON.ActionManager.OnPointerOverTrigger,
+          },
+          mesh,
+          "scaling",
+          CONFIG.HandHoverScaling()
+        ),
+        // TODO: 这里后续应该加上显示可操作按钮的处理
+        new BABYLON.ExecuteCodeAction(
+          BABYLON.ActionManager.OnPointerOverTrigger,
+          (event) => {
+            console.log(`<Hover>hand: ${handIdx}`, "event: ", event);
+          }
+        ),
+      ]
+    )
+  );
+  // 监听`Hover`离开事件
+  mesh.actionManager.registerAction(
+    new BABYLON.CombineAction(
+      { trigger: BABYLON.ActionManager.OnPointerOutTrigger },
+      [
+        new BABYLON.SetValueAction(
+          {
+            trigger: BABYLON.ActionManager.OnPointerOutTrigger,
+          },
+          mesh,
+          "scaling",
+          CONFIG.HandHoverOutScaling()
+        ),
+        // TODO: 这里后续应该加上禁用可操作按钮的处理
+        new BABYLON.ExecuteCodeAction(
+          BABYLON.ActionManager.OnPointerOutTrigger,
+          (event) => {
+            console.log(`<Hover Out>hand: ${handIdx}`, "event:", event);
+          }
+        ),
+      ]
+    )
+  );
+}