add babylon.js

package-lock.json

@@ -29,6 +29,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@babylonjs/core": "^5.29.0",
         "@types/google-protobuf": "^3.15.6",
         "@types/three": "^0.144.0",
         "@typescript-eslint/eslint-plugin": "^5.40.1",
@@ -1930,6 +1931,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babylonjs/core": {
+      "version": "5.29.0",
+      "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-5.29.0.tgz",
+      "integrity": "sha512-1gua7RJ52baX34R2uoO4HeF3l0y4s8nUU5BCbWkmDUPomqbBKaQE0nrvTHkrsHnwzdqZv8bO3Nb2h7SXsMesEA==",
+      "dev": true
+    },
     "node_modules/@bcoe/v8-coverage": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
@@ -17013,6 +17020,12 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@babylonjs/core": {
+      "version": "5.29.0",
+      "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-5.29.0.tgz",
+      "integrity": "sha512-1gua7RJ52baX34R2uoO4HeF3l0y4s8nUU5BCbWkmDUPomqbBKaQE0nrvTHkrsHnwzdqZv8bO3Nb2h7SXsMesEA==",
+      "dev": true
+    },
     "@bcoe/v8-coverage": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",

package.json

@@ -50,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@babylonjs/core": "^5.29.0",
     "@types/google-protobuf": "^3.15.6",
     "@types/three": "^0.144.0",
     "@typescript-eslint/eslint-plugin": "^5.40.1",

src/ui/App.tsx

 import React from "react";
 import JoinRoom from "./JoinRoom";
 import WaitRoom from "./WaitRoom";
-import ThreeJs from "../ThreeJs";
+import ThreeJs from "./ThreeJs";
+import BabylonJs from "./BabylonJs";
 import { Routes, Route } from "react-router-dom";
 
 function App() {
@@ -10,6 +11,7 @@ function App() {
       <Route path="/" element={<JoinRoom />} />
       <Route path="/:player/:passWd/:ip" element={<WaitRoom />} />
       <Route path="/three.js" element={<ThreeJs />} />
+      <Route path="/babylon.js" element={<BabylonJs />} />
     </Routes>
   );
 }

src/ui/BabylonJs.tsx

+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} />;
+}