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}