From 66f7d9d7b9117c4e894f170afd247929dacccb30 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Tue, 9 Sep 2025 14:32:31 +0530 Subject: [PATCH] added fps to global ui --- .../properties/GlobalProperties.tsx | 143 ++++++------------ app/src/modules/scene/helpers/StatsHelper.tsx | 6 +- .../modules/scene/helpers/frameLimiter.tsx | 10 +- app/src/store/scene/useSceneStore.ts | 10 ++ app/src/types/world/worldConstants.ts | 14 +- 5 files changed, 73 insertions(+), 110 deletions(-) diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx index df21134..900c260 100644 --- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx @@ -1,13 +1,27 @@ -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import InputRange from "../../../ui/inputs/InputRange"; import InputToggle from "../../../ui/inputs/InputToggle"; import { AIIcon } from "../../../icons/ExportCommonIcons"; import LabeledButton from "../../../ui/inputs/LabledButton"; -import { useAzimuth, useElevation, useLimitDistance, useRenderDistance, useResetCamera, useRoofVisibility, useShadows, useSocketStore, useTileDistance, useToggleView, useWallVisibility } from "../../../../store/builder/store"; +import { + useAzimuth, + useElevation, + useLimitDistance, + useRenderDistance, + useResetCamera, + useRoofVisibility, + useShadows, + useSocketStore, + useTileDistance, + useToggleView, + useWallVisibility, +} from "../../../../store/builder/store"; +import { useSceneStore } from "../../../../store/scene/useSceneStore"; import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment"; import * as CONSTANTS from "../../../../types/world/worldConstants"; import { useParams } from "react-router-dom"; import { getUserData } from "../../../../functions/getUserData"; + const GlobalProperties: React.FC = () => { const { toggleView, setToggleView } = useToggleView(); const { roofVisibility, setRoofVisibility } = useRoofVisibility(); @@ -18,6 +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 { socket } = useSocketStore(); const { limitDistance, setLimitDistance } = useLimitDistance(); const [distance, setDistance] = useState(40); @@ -29,16 +44,7 @@ const GlobalProperties: React.FC = () => { const optimizeScene = async (value: any) => { if (!projectId) return; - setEnvironment( - organization, - userId, - wallVisibility, - roofVisibility, - shadows, - 30, - true, - projectId - ); + setEnvironment(organization, userId, wallVisibility, roofVisibility, shadows, 30, true, projectId); setRenderDistance(30); setLimitDistance(true); }; @@ -46,28 +52,10 @@ const GlobalProperties: React.FC = () => { const limitRenderDistance = async () => { if (!projectId) return; if (limitDistance) { - setEnvironment( - organization, - userId, - wallVisibility, - roofVisibility, - shadows, - 75, - !limitDistance, - projectId - ); + setEnvironment(organization, userId, wallVisibility, roofVisibility, shadows, 75, !limitDistance, projectId); setRenderDistance(75); } else { - setEnvironment( - organization, - userId, - wallVisibility, - roofVisibility, - shadows, - renderDistance, - !limitDistance, - projectId - ); + setEnvironment(organization, userId, wallVisibility, roofVisibility, shadows, renderDistance, !limitDistance, projectId); } setLimitDistance(!limitDistance); }; @@ -77,39 +65,23 @@ const GlobalProperties: React.FC = () => { setRenderDistance(value); } + function updateFps(value: number) { + setFps(value); + } + const updatedDist = async (value: number) => { if (!projectId) return; setRenderDistance(value); // setDistance(value); - const data = await setEnvironment( - organization, - userId, - wallVisibility, - roofVisibility, - shadows, - value, - limitDistance, - projectId - ); + const data = await setEnvironment(organization, userId, wallVisibility, roofVisibility, shadows, value, limitDistance, projectId); }; // Function to toggle roof visibility const changeRoofVisibility = async () => { - if (!projectId) return; //using REST - const data = await setEnvironment( - organization, - userId, - wallVisibility, - !roofVisibility, - shadows, - renderDistance, - limitDistance, - projectId - ); - // + const data = await setEnvironment(organization, userId, wallVisibility, !roofVisibility, shadows, renderDistance, limitDistance, projectId); //using Socket // const visData = { @@ -129,16 +101,7 @@ const GlobalProperties: React.FC = () => { if (!projectId) return; //using REST - const data = await setEnvironment( - organization, - userId, - !wallVisibility, - roofVisibility, - shadows, - renderDistance, - limitDistance, projectId - ); - // + const data = await setEnvironment(organization, userId, !wallVisibility, roofVisibility, shadows, renderDistance, limitDistance, projectId); //using Socket // const visData = { @@ -158,17 +121,7 @@ const GlobalProperties: React.FC = () => { if (!projectId) return; //using REST - const data = await setEnvironment( - organization, - userId, - wallVisibility, - roofVisibility, - !shadows, - renderDistance, - limitDistance, - projectId - ); - // + const data = await setEnvironment(organization, userId, wallVisibility, roofVisibility, !shadows, renderDistance, limitDistance, projectId); //using Socket // const visData = { @@ -201,31 +154,13 @@ const GlobalProperties: React.FC = () => {
- - - - + + + +
+ { onPointerUp={updatedDist} key={"6"} /> + +
+ + updateFps(value)} + onPointerUp={() => {}} + key={"5"} + /> ); diff --git a/app/src/modules/scene/helpers/StatsHelper.tsx b/app/src/modules/scene/helpers/StatsHelper.tsx index 7414b70..28dcb63 100644 --- a/app/src/modules/scene/helpers/StatsHelper.tsx +++ b/app/src/modules/scene/helpers/StatsHelper.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys"; -import { Perf } from 'r3f-perf'; +import { Stats } from "@react-three/drei"; export default function StatsHelper() { const [visible, setVisible] = useState(false); @@ -11,7 +11,7 @@ export default function StatsHelper() { const keyCombination = detectModifierKeys(event); if (keyCombination === "F1") { event.preventDefault(); - setVisible(prev => !prev); + setVisible((prev) => !prev); } }; @@ -19,5 +19,5 @@ export default function StatsHelper() { return () => window.removeEventListener("keydown", handleKeyDown); }, []); - return visible ? : null; + return visible ? : null; } diff --git a/app/src/modules/scene/helpers/frameLimiter.tsx b/app/src/modules/scene/helpers/frameLimiter.tsx index 45d273e..6ce581e 100644 --- a/app/src/modules/scene/helpers/frameLimiter.tsx +++ b/app/src/modules/scene/helpers/frameLimiter.tsx @@ -1,14 +1,10 @@ -import { Stats } from "@react-three/drei"; import { useThree } from "@react-three/fiber"; import { useLayoutEffect } from "react"; -import { useControls } from "leva"; +import { useSceneStore } from "../../../store/scene/useSceneStore"; function FPSLimiter() { const { advance, set, frameloop } = useThree(); - - const { fps } = useControls("Performance", { - fps: { value: 30, min: 1, max: 60, step: 1 }, - }); + const { fps } = useSceneStore(); useLayoutEffect(() => { let then = 0; @@ -34,7 +30,7 @@ function FPSLimiter() { }; }, [fps, advance, set, frameloop]); - return ; + return null; } export default FPSLimiter; diff --git a/app/src/store/scene/useSceneStore.ts b/app/src/store/scene/useSceneStore.ts index f0c452a..9191fc7 100644 --- a/app/src/store/scene/useSceneStore.ts +++ b/app/src/store/scene/useSceneStore.ts @@ -3,20 +3,30 @@ import { immer } from "zustand/middleware/immer"; import * as THREE from "three"; type SceneStore = { + fps: number; camState: { position: THREE.Vector3; target: THREE.Vector3; }; + + setFps: (fps: number) => void; setCamera: (pos: THREE.Vector3, target: THREE.Vector3) => void; }; export const useSceneStore = create()( immer((set) => ({ + fps: 60, camState: { position: new THREE.Vector3(0, 5, 10), target: new THREE.Vector3(0, 0, 0), }, + setFps: (fps) => { + set((state) => { + state.fps = fps; + }); + }, + setCamera: (pos, target) => set((state) => { state.camState.position.copy(pos); diff --git a/app/src/types/world/worldConstants.ts b/app/src/types/world/worldConstants.ts index e9557d1..e2640e5 100644 --- a/app/src/types/world/worldConstants.ts +++ b/app/src/types/world/worldConstants.ts @@ -185,10 +185,15 @@ export type DistanceConfig = { maxDistance: number; }; -export type undoRedoCount = { +export type UndoRedoConfig = { undoRedoCount: number; }; +export type SceneConfig = { + minFps: number; + maxFps: number; +}; + export const firstPersonControls: Controls = { azimuthRotateSpeed: 0.3, // Speed of rotation around the azimuth axis polarRotateSpeed: 0.3, // Speed of rotation around the polar axis @@ -382,6 +387,11 @@ export const distanceConfig: DistanceConfig = { maxDistance: 75, }; -export const undoRedoConfig: undoRedoCount = { +export const undoRedoConfig: UndoRedoConfig = { undoRedoCount: 50, }; + +export const sceneConfig: SceneConfig = { + minFps: 15, + maxFps: 60, +};