start to draw duel plate

src/ui/BabylonJs.tsx

-// 测试用的Babylon.js demo页面
-import React, { useEffect, useRef } from "react";
-import * as BABYLON from "@babylonjs/core";
-
-export default function () {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    if (canvasRef.current) {
-      const canvasCurrent = canvasRef.current;
-      const engine = new BABYLON.Engine(canvasCurrent, true);
-      const scene = new BABYLON.Scene(engine);
-
-      const camera = new BABYLON.FreeCamera(
-        "camera1",
-        new BABYLON.Vector3(0, 5, -10),
-        scene
-      );
-      camera.setTarget(BABYLON.Vector3.Zero());
-      camera.attachControl(canvasCurrent, true);
-
-      const light = new BABYLON.HemisphericLight(
-        "light",
-        new BABYLON.Vector3(0, 1, 0),
-        scene
-      );
-      light.intensity = 0.7;
-
-      const sphere = BABYLON.MeshBuilder.CreateSphere(
-        "sphere",
-        { diameter: 2, segments: 32 },
-        scene
-      );
-      sphere.position.y = 1;
-
-      const ground = BABYLON.MeshBuilder.CreateGround(
-        "ground",
-        { width: 6, height: 6 },
-        scene
-      );
-
-      engine.runRenderLoop(() => {
-        scene.render();
-      });
-    }
-  }, [canvasRef]);
-
-  return <canvas ref={canvasRef} />;
-}

src/ui/Duel/simpleDuel.tsx

@@ -6,8 +6,9 @@
 import { IDuelPlate, TypeSelector } from "./duel";
 import * as DuelData from "./data";
 import { useAppSelector } from "../../hook";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import type { RootState } from "../../store";
+import * as BABYLON from "@babylonjs/core";
 
 export default class SimpleDuelPlateImpl implements IDuelPlate {
   handsSelector?: TypeSelector<DuelData.Card[]>;
@@ -15,22 +16,71 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
   constructor() {}
 
   render(): React.ReactElement {
+    // ----- 数据获取 -----
+
     // 默认的手牌Selector，返回三个code为-1的Card。
     const defaultHandsSelector = (_: RootState) => {
       return new Array(5).fill({ code: -1 });
     };
     const hands = useAppSelector(this.handsSelector || defaultHandsSelector);
 
+    // ----- WebGL渲染 -----
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    useEffect(() => {
+      // 初始化Scene
+      const canvasCurrent = canvasRef.current;
+      const engine = new BABYLON.Engine(canvasCurrent, true);
+      const scene = new BABYLON.Scene(engine);
+
+      // 创建Camera
+      const camera = new BABYLON.FreeCamera(
+        "camera1",
+        new BABYLON.Vector3(1, 5, -10), // 俯视方向
+        scene
+      );
+      camera.setTarget(BABYLON.Vector3.Zero()); // 俯视向前
+      camera.attachControl(canvasCurrent, true);
+
+      // 创建光源
+      const light = new BABYLON.HemisphericLight(
+        "light",
+        new BABYLON.Vector3(1, 2.5, 1),
+        scene
+      );
+      light.intensity = 0.7;
+
+      // 创建卡槽
+      const cardSlot = BABYLON.MeshBuilder.CreateBox(
+        "cardSlot",
+        { width: 0.5, height: 0.75, depth: 0.05 },
+        scene
+      );
+      cardSlot.position = new BABYLON.Vector3(-2, 0.5, -3);
+      cardSlot.rotation = new BABYLON.Vector3(1.5, 0, 0);
+      const boxMaterail = new BABYLON.StandardMaterial("boxMaterail", scene);
+      boxMaterail.diffuseColor = BABYLON.Color3.Blue();
+      cardSlot.material = boxMaterail;
+
+      // 创建地板
+      const ground = BABYLON.MeshBuilder.CreateGround(
+        "ground",
+        { width: 6, height: 6 },
+        scene
+      );
+
+      // 渲染循环
+      engine.runRenderLoop(() => {
+        scene.render();
+      });
+    }, [canvasRef]);
+
     return (
-      <div>
-        <table border={1}>
-          <tr>
-            {hands.map((hand) => (
-              <td>{hand.code}</td>
-            ))}
-          </tr>
-        </table>
-      </div>
+      <canvas
+        width={window.innerWidth}
+        height={window.innerHeight}
+        ref={canvasRef}
+      />
     );
   }
 

src/ui/Neos.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import JoinRoom from "./JoinRoom";
 import WaitRoom from "./WaitRoom";
 import ThreeJs from "./ThreeJs";
-import BabylonJs from "./BabylonJs";
 import { Routes, Route } from "react-router-dom";
 import Mora from "./Mora";
 import Duel from "./Duel/main";
@@ -16,7 +15,6 @@ export default function () {
       <Route path="/mora" element={<Mora />} />
       <Route path="/duel" element={<Duel />} />
       <Route path="/three" element={<ThreeJs />} />
-      <Route path="/babylon" element={<BabylonJs />} />
     </Routes>
   );
 }