add limit fps constraints

app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx

@@ -32,7 +32,7 @@ const GlobalProperties: React.FC = () => {
     const { azimuth, setAzimuth } = useAzimuth();
     const { renderDistance, setRenderDistance } = useRenderDistance();
     const { setPlaneValue, setGridValue, planeValue, gridValue } = useTileDistance();
-    const { fps, setFps } = useSceneStore();
+    const { fps, setFps, limitFps, setLimitFps } = useSceneStore();
     const { socket } = useSocketStore();
     const { limitDistance, setLimitDistance } = useLimitDistance();
     const [distance, setDistance] = useState<number>(40);
@@ -65,6 +65,17 @@ const GlobalProperties: React.FC = () => {
         setRenderDistance(value);
     }
 
+    const limitFpsToggle = async () => {
+        if (!projectId) return;
+        if (limitFps) {
+            // update backend
+            setFps(60);
+        } else {
+            // update backend
+        }
+        setLimitFps(!limitFps);
+    };
+
     function updateFps(value: number) {
         setFps(value);
     }
@@ -161,14 +172,7 @@ const GlobalProperties: React.FC = () => {
 
                 <div className="split"></div>
 
-                <InputToggle
+                <InputToggle inputKey="4" label="Limit Render Distance" value={limitDistance} onClick={limitRenderDistance} />
-                    inputKey="4"
-                    label="Limit Render Distance"
-                    value={limitDistance}
-                    onClick={async () => {
-                        await limitRenderDistance(); // Call the function here
-                    }}
-                />
                 <InputRange
                     label="Distance"
                     disabled={!limitDistance}
@@ -182,14 +186,16 @@ const GlobalProperties: React.FC = () => {
 
                 <div className="split"></div>
 
+                <InputToggle inputKey="7" label="Limit Fps" value={limitFps} onClick={limitFpsToggle} />
                 <InputRange
                     label="Fps"
+                    disabled={!limitFps}
                     value={fps}
                     min={CONSTANTS.sceneConfig.minFps}
                     max={CONSTANTS.sceneConfig.maxFps}
                     onChange={(value: number) => updateFps(value)}
                     onPointerUp={() => {}}
-                    key={"5"}
+                    key={"8"}
                 />
             </section>
         </div>

app/src/modules/scene/helpers/frameLimiter.tsx

@@ -4,31 +4,36 @@ import { useSceneStore } from "../../../store/scene/useSceneStore";
 
 function FPSLimiter() {
     const { advance, set, frameloop } = useThree();
-    const { fps } = useSceneStore();
+    const { fps, limitFps } = useSceneStore();
 
     useLayoutEffect(() => {
         let then = 0;
         let raf: number;
-        const interval = 1000 / fps;
 
-        function tick(t: number) {
+        if (limitFps) {
-            raf = requestAnimationFrame(tick);
+            const interval = 1000 / fps;
-            const elapsed = t - then;
 
-            if (elapsed > interval) {
+            function tick(t: number) {
-                advance(t, true);
+                raf = requestAnimationFrame(tick);
-                then = t - (elapsed % interval);
+                const elapsed = t - then;
+
+                if (elapsed > interval) {
+                    advance(t, true);
+                    then = t - (elapsed % interval);
+                }
             }
+
+            set({ frameloop: "never" });
+            raf = requestAnimationFrame(tick);
+
+            return () => {
+                cancelAnimationFrame(raf);
+                set({ frameloop });
+            };
+        } else {
+            set({ frameloop: "always" });
         }
-
+    }, [fps, limitFps, advance, set, frameloop]);
-        set({ frameloop: "never" });
-        raf = requestAnimationFrame(tick);
-
-        return () => {
-            cancelAnimationFrame(raf);
-            set({ frameloop });
-        };
-    }, [fps, advance, set, frameloop]);
 
     return null;
 }

app/src/store/scene/useSceneStore.ts

@@ -3,24 +3,33 @@ import { immer } from "zustand/middleware/immer";
 import * as THREE from "three";
 
 type SceneStore = {
+    limitFps: boolean;
     fps: number;
     camState: {
         position: THREE.Vector3;
         target: THREE.Vector3;
     };
 
+    setLimitFps: (limitFps: boolean) => void;
     setFps: (fps: number) => void;
     setCamera: (pos: THREE.Vector3, target: THREE.Vector3) => void;
 };
 
 export const useSceneStore = create<SceneStore>()(
     immer((set) => ({
+        limitFps: false,
         fps: 60,
         camState: {
             position: new THREE.Vector3(0, 5, 10),
             target: new THREE.Vector3(0, 0, 0),
         },
 
+        setLimitFps: (limitFps) => {
+            set((state) => {
+                state.limitFps = limitFps;
+            });
+        },
+
         setFps: (fps) => {
             set((state) => {
                 state.fps = fps;