add BabylonCanvas

src/ui/Duel/babylon.tsx

 import React, { useEffect } from "react";
+import { Engine, Scene } from "react-babylonjs";
+import * as BABYLON from "@babylonjs/core";
+import * as CONFIG from "../../config/ui";
 
-const BabylonCanvas = () => {};
+const BabylonCanvas = () => (
+  <div>
+    <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
+      <Scene>
+        <DuelCamera />
+        <DuelLight />
+        <DuelGround />
+      </Scene>
+    </Engine>
+  </div>
+);
 
-const DuelGround = () => {};
+const DuelCamera = () => (
+  <freeCamera
+    name="duel-camera"
+    position={new BABYLON.Vector3(0, 8, -10)}
+    target={BABYLON.Vector3.Zero()}
+  ></freeCamera>
+);
+
+const DuelLight = () => (
+  <hemisphericLight
+    name="duel-light"
+    direction={new BABYLON.Vector3(1, 2.5, 1)}
+    intensity={0.7}
+  ></hemisphericLight>
+);
+
+const DuelGround = () => {
+  const shape = CONFIG.GroundShape();
+  const texture = new BABYLON.Texture(
+    `http://localhost:3030/images/newfield.png`
+  );
+  texture.hasAlpha = true;
+
+  return (
+    <ground name="duel-ground" width={shape.width} height={shape.height}>
+      <standardMaterial
+        name="duel-ground-mat"
+        diffuseTexture={texture}
+      ></standardMaterial>
+    </ground>
+  );
+};
 
 export default BabylonCanvas;

src/ui/Neos.tsx

@@ -4,6 +4,7 @@ import WaitRoom from "./WaitRoom";
 import { Routes, Route } from "react-router-dom";
 import Mora from "./Mora";
 import Duel from "./Duel/mod";
+import BabylonCanvas from "./Duel/babylon";
 
 export default function () {
   // FIXME: 这里Mora/Duel路由应该由每个房间指定一个路径
@@ -13,6 +14,7 @@ export default function () {
       <Route path="/:player/:passWd/:ip" element={<WaitRoom />} />
       <Route path="/mora" element={<Mora />} />
       <Route path="/duel" element={<Duel />} />
+      <Route path="/react-babylon" element={<BabylonCanvas />} />
     </Routes>
   );
 }