Merge branch 'feat/migrate/babylon.js' into 'main'

Feat/migrate/babylon.js

See merge request mycard/Neos!7

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() {
@@ -9,7 +10,8 @@ function App() {
     <Routes>
       <Route path="/" element={<JoinRoom />} />
       <Route path="/:player/:passWd/:ip" element={<WaitRoom />} />
-      <Route path="/three.js" element={<ThreeJs />} />
+      <Route path="/three" element={<ThreeJs />} />
+      <Route path="/babylon" 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} />;
+}