add Exclusion component

src/ui/Duel/exclusion.ts

-import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
-
-export default (scene: BABYLON.Scene) => {
-  // 除外区
-  const shape = CONFIG.ExclusionSlotShape();
-  const exclusion = BABYLON.MeshBuilder.CreateBox("exclusion", shape);
-  // 位置
-  exclusion.position = new BABYLON.Vector3(3.2, CONFIG.Floating, -0.7);
-  // 旋转
-  exclusion.rotation = CONFIG.ExclusionSlotRotation();
-  // 材质
-  const exclusionMaterial = new BABYLON.StandardMaterial(
-    "exclusionMaterial",
-    scene
-  );
-  exclusionMaterial.diffuseColor = CONFIG.ExclusionColor();
-  exclusion.material = exclusionMaterial;
-};

src/ui/Duel/exclusion_.tsx

+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "../../config/ui";
+
+const Exclusion = () => {
+  const shape = CONFIG.ExclusionSlotShape();
+  const position = new BABYLON.Vector3(3.2, CONFIG.Floating, -0.7);
+  const rotation = CONFIG.ExclusionSlotRotation();
+
+  return (
+    <box
+      name="exclusion"
+      width={shape.width}
+      height={shape.height}
+      depth={shape.depth}
+      position={position}
+      rotation={rotation}
+    >
+      <standardMaterial
+        name="exclusion-mat"
+        diffuseColor={CONFIG.ExclusionColor()}
+      ></standardMaterial>
+    </box>
+  );
+};
+
+export default Exclusion;

src/ui/Duel/main.tsx

@@ -10,6 +10,7 @@ import HintNotification from "./hintNotification";
 import Magics from "./magics_";
 import Field from "./field_";
 import Deck from "./deck_";
+import Exclusion from "./exclusion_";
 
 const NeosDuel = () => (
   <>
@@ -25,6 +26,7 @@ const NeosDuel = () => (
               <Magics />
               <Field />
               <Deck />
+              <Exclusion />
               <Ground />
             </Provider>
           </Scene>