Added scene

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -4,6 +4,7 @@ import Panel from "./Panel";
 import AddButtons from "./AddButtons";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
+import Scene from "../../../modules/scene/scene";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -78,20 +79,25 @@ const RealTimeVisulization: React.FC = () => {
         left: isPlaying ? "0%" : "",
       }}
     >
-      <AddButtons
-        hiddenPanels={hiddenPanels}
-        setHiddenPanels={setHiddenPanels}
+      <div
+        className="scene-container"
+        style={{ height: "100%", width: "100%" }}
+      >
+        <Scene />
+      </div>
+      {!isPlaying && (
+        <AddButtons
+          hiddenPanels={hiddenPanels}
+          setHiddenPanels={setHiddenPanels}
+          selectedZone={selectedZone}
+          setSelectedZone={setSelectedZone}
+        />
+      )}
+      <DisplayZone
+        zonesData={zonesData}
         selectedZone={selectedZone}
         setSelectedZone={setSelectedZone}
       />
-      {/* {!isPlaying && ( */}
-      <AddButtons
-        hiddenPanels={hiddenPanels}
-        setHiddenPanels={setHiddenPanels}
-        selectedZone={selectedZone}
-        setSelectedZone={setSelectedZone}
-      />
-      {/* )} */}
       <Panel
         selectedZone={selectedZone}
         hiddenPanels={hiddenPanels}

app/src/styles/pages/realTimeViz.scss

@@ -143,7 +143,15 @@
   width: calc((100vw * 1.65) - (320px + 270px + 70px) / 0.6);
   z-index: 100;
 
+.scene-container{
+  width: 100%;
+  height: 100%;
+  canvas{
+    width: calc((100vw * 1.65) - (320px + 270px + 70px) / 0.6) !important;
+    height: 100% !important;
 
+  }
+}
 
   &.top {
     transform: scale(1.5);