update simpleDuel

src/ui/Duel/simpleDuel/cemetery.ts

@@ -3,12 +3,14 @@ import * as CONFIG from "./config";
 
 export default (scene: BABYLON.Scene) => {
   // 墓地
-  const cemetery = BABYLON.MeshBuilder.CreateBox(
-    "cemetery",
-    CONFIG.CemeterySlotShape()
-  );
+  const shape = CONFIG.CemeterySlotShape();
+  const cemetery = BABYLON.MeshBuilder.CreateBox("cemetery", shape);
   // 位置
-  cemetery.position = new BABYLON.Vector3(3.2, 0.5, -2.0);
+  cemetery.position = new BABYLON.Vector3(
+    3.2,
+    shape.depth / 2 + CONFIG.Floating,
+    -2.0
+  );
   // 旋转
   cemetery.rotation = CONFIG.CemeterySlotRotation();
   // 材质

src/ui/Duel/simpleDuel/config.ts

@@ -42,6 +42,9 @@ export const FieldSlotRotation = () => {
   return new BABYLON.Vector3(1.5, 0, 0);
 };
 
+// 浮空
+export const Floating = 0.02;
+
 // 手牌
 export const HandShape = () => {
   return { width: 0.5, height: 0.75 };

src/ui/Duel/simpleDuel/deck.ts

@@ -9,7 +9,11 @@ export default (scene: BABYLON.Scene) => {
     scene
   );
   // 位置
-  deck.position = new BABYLON.Vector3(3.2, 0.5, -3.2);
+  deck.position = new BABYLON.Vector3(
+    3.2,
+    CONFIG.DeckSlotShape().depth / 2 + CONFIG.Floating,
+    -3.2
+  );
   // 旋转
   deck.rotation = CONFIG.DeckSlotRotation();
   // 材质
@@ -25,7 +29,11 @@ export default (scene: BABYLON.Scene) => {
     scene
   );
   // 位置
-  extraDeck.position = new BABYLON.Vector3(-3.3, 0.5, -3.2);
+  extraDeck.position = new BABYLON.Vector3(
+    -3.3,
+    CONFIG.ExtraDeckSlotShape().depth / 2 + CONFIG.Floating,
+    -3.2
+  );
   // 旋转
   extraDeck.rotation = CONFIG.DeckSlotRotation();
   // 材质

src/ui/Duel/simpleDuel/exclusion.ts

@@ -3,12 +3,10 @@ import * as CONFIG from "./config";
 
 export default (scene: BABYLON.Scene) => {
   // 除外区
-  const exclusion = BABYLON.MeshBuilder.CreateBox(
-    "exclusion",
-    CONFIG.ExclusionSlotShape()
-  );
+  const shape = CONFIG.ExclusionSlotShape();
+  const exclusion = BABYLON.MeshBuilder.CreateBox("exclusion", shape);
   // 位置
-  exclusion.position = new BABYLON.Vector3(3.2, 0.5, -0.7);
+  exclusion.position = new BABYLON.Vector3(3.2, CONFIG.Floating, -0.7);
   // 旋转
   exclusion.rotation = CONFIG.ExclusionSlotRotation();
   // 材质

src/ui/Duel/simpleDuel/extraMonsters.ts

@@ -3,14 +3,20 @@ import * as CONFIG from "./config";
 
 export default (scene: BABYLON.Scene) => {
   const xs = [-1.1, 1];
+  const shape = CONFIG.CardSlotShape();
+
   for (let i in xs) {
     const slot = BABYLON.MeshBuilder.CreateBox(
       `extraMonster${i}`,
-      CONFIG.CardSlotShape(),
+      shape,
       scene
     );
     // 位置
-    slot.position = new BABYLON.Vector3(xs[i], 0.5, 0);
+    slot.position = new BABYLON.Vector3(
+      xs[i],
+      shape.depth / 2 + CONFIG.Floating,
+      0
+    );
     // 旋转
     slot.rotation = CONFIG.CardSlotRotation();
     // 材质

src/ui/Duel/simpleDuel/field.ts

@@ -3,9 +3,14 @@ import * as CONFIG from "./config";
 
 export default (scene: BABYLON.Scene) => {
   // 墓地
-  const field = BABYLON.MeshBuilder.CreateBox("field", CONFIG.FieldSlotShape());
+  const shape = CONFIG.FieldSlotShape();
+  const field = BABYLON.MeshBuilder.CreateBox("field", shape);
   // 位置
-  field.position = new BABYLON.Vector3(-3.3, 0.5, -2.0);
+  field.position = new BABYLON.Vector3(
+    -3.3,
+    shape.depth / 2 + CONFIG.Floating,
+    -2.0
+  );
   // 旋转
   field.rotation = CONFIG.FieldSlotRotation();
   // 材质

src/ui/Duel/simpleDuel/magics.ts

@@ -4,14 +4,16 @@ import * as CONFIG from "./config";
 export default (scene: BABYLON.Scene) => {
   const left = -2.15;
   const gap = 1.05;
+  const shape = CONFIG.CardSlotShape();
+
   for (let i = 0; i < 5; i++) {
-    const slot = BABYLON.MeshBuilder.CreateBox(
-      `magic${i}`,
-      CONFIG.CardSlotShape(),
-      scene
-    );
+    const slot = BABYLON.MeshBuilder.CreateBox(`magic${i}`, shape, scene);
     // 位置
-    slot.position = new BABYLON.Vector3(left + gap * i, 0.5, -2.5);
+    slot.position = new BABYLON.Vector3(
+      left + gap * i,
+      shape.depth / 2 + CONFIG.Floating,
+      -2.5
+    );
     // 旋转
     slot.rotation = CONFIG.CardSlotRotation();
     // 材质

src/ui/Duel/simpleDuel/mod.tsx

@@ -47,7 +47,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       // 创建Camera
       const camera = new BABYLON.FreeCamera(
         "camera1",
-        new BABYLON.Vector3(0, 12, 0), // 俯视方向
+        new BABYLON.Vector3(0, 8, -10), // 俯视方向
         scene
       );
       camera.setTarget(BABYLON.Vector3.Zero()); // 俯视向前

src/ui/Duel/simpleDuel/monsters.ts

@@ -4,14 +4,16 @@ import * as CONFIG from "./config";
 export default (scene: BABYLON.Scene) => {
   const left = -2.15;
   const gap = 1.05;
+  const shape = CONFIG.CardSlotShape();
+
   for (let i = 0; i < 5; i++) {
-    const slot = BABYLON.MeshBuilder.CreateBox(
-      `monster${i}`,
-      CONFIG.CardSlotShape(),
-      scene
-    );
+    const slot = BABYLON.MeshBuilder.CreateBox(`monster${i}`, shape, scene);
     // 位置
-    slot.position = new BABYLON.Vector3(left + gap * i, 0.5, -1.35);
+    slot.position = new BABYLON.Vector3(
+      left + gap * i,
+      shape.depth / 2 + CONFIG.Floating,
+      -1.35
+    );
     // 旋转
     slot.rotation = CONFIG.CardSlotRotation();
     // 材质