render field

src/ui/Duel/simpleDuel/config.ts

@@ -23,6 +23,9 @@ export const CemeterySlotShape = () => {
 export const ExclusionSlotShape = () => {
   return { width: 0.8, height: 1, depth: 0.2 };
 };
+export const FieldSlotShape = () => {
+  return { width: 0.8, height: 1, depth: 0.2 };
+};
 export const CardSlotRotation = () => {
   return new BABYLON.Vector3(1.5, 0, 0);
 };
@@ -35,6 +38,9 @@ export const CemeterySlotRotation = () => {
 export const ExclusionSlotRotation = () => {
   return new BABYLON.Vector3(1.5, 0, 0);
 };
+export const FieldSlotRotation = () => {
+  return new BABYLON.Vector3(1.5, 0, 0);
+};
 
 // 手牌
 export const HandShape = () => {
@@ -78,3 +84,8 @@ export const CemeteryColor = () => {
 export const ExclusionColor = () => {
   return BABYLON.Color3.Black();
 };
+
+// 场地
+export const FieldColor = () => {
+  return BABYLON.Color3.White();
+};

src/ui/Duel/simpleDuel/field.ts

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "./config";
+
+export default (scene: BABYLON.Scene) => {
+  // 墓地
+  const field = BABYLON.MeshBuilder.CreateBox("field", CONFIG.FieldSlotShape());
+  // 位置
+  field.position = new BABYLON.Vector3(-3.3, 0.5, -2.0);
+  // 旋转
+  field.rotation = CONFIG.FieldSlotRotation();
+  // 材质
+  const fieldMaterial = new BABYLON.StandardMaterial("fieldMaterial", scene);
+  fieldMaterial.diffuseColor = CONFIG.FieldColor();
+  field.material = fieldMaterial;
+};

src/ui/Duel/simpleDuel/mod.tsx

@@ -15,6 +15,7 @@ import renderMagics from "./magics";
 import renderDeck from "./deck";
 import renderCemetery from "./cemetery";
 import renderExclusion from "./exclusion";
+import renderField from "./field";
 import * as CONFIG from "./config";
 import { CardMeta } from "../../../api/cards";
 
@@ -81,6 +82,9 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       // 创建除外区
       renderExclusion(scene);
 
+      // 创建场地
+      renderField(scene);
+
       // 创建地板
       const ground = BABYLON.MeshBuilder.CreateGround(
         "ground",