add Field component

src/ui/Duel/field.ts → src/ui/Duel/field_.tsx

 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
 
-export default (scene: BABYLON.Scene) => {
-  // 墓地
+const Field = () => {
   const shape = CONFIG.FieldSlotShape();
-  const field = BABYLON.MeshBuilder.CreateBox("field", shape);
-  // 位置
-  field.position = new BABYLON.Vector3(
+  const position = new BABYLON.Vector3(
     -3.3,
     shape.depth / 2 + CONFIG.Floating,
     -2.0
   );
-  // 旋转
-  field.rotation = CONFIG.FieldSlotRotation();
-  // 材质
-  const fieldMaterial = new BABYLON.StandardMaterial("fieldMaterial", scene);
-  fieldMaterial.diffuseColor = CONFIG.FieldColor();
-  field.material = fieldMaterial;
+  const rotation = CONFIG.FieldSlotRotation();
+
+  return (
+    <box
+      name="field"
+      width={shape.width}
+      height={shape.height}
+      depth={shape.depth}
+      position={position}
+      rotation={rotation}
+    >
+      <standardMaterial name="field-mat" diffuseColor={CONFIG.FieldColor()} />
+    </box>
+  );
 };
+
+export default Field;

src/ui/Duel/main.tsx

@@ -8,6 +8,7 @@ import Monsters from "./monsters_";
 import CardModal from "./cardModal";
 import HintNotification from "./hintNotification";
 import Magics from "./magics_";
+import Field from "./field_";
 
 const NeosDuel = () => (
   <>
@@ -21,6 +22,7 @@ const NeosDuel = () => (
               <Hands />
               <Monsters />
               <Magics />
+              <Field />
               <Ground />
             </Provider>
           </Scene>