Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added fps to global ui

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-09-09 14:32:31 +05:30
parent cc87a51796
commit 66f7d9d7b9
5 changed files with 73 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
View File

@@ -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<number>(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 = () => {
<div className="split"></div>
<InputToggle
value={roofVisibility}
inputKey="1"
label="Roof Visibility"
onClick={changeRoofVisibility}
/>
<InputToggle
value={wallVisibility}
inputKey="2"
label="Wall Visibility"
onClick={changeWallVisibility}
/>
<InputToggle
value={shadows}
inputKey="3"
label="Shadows Visibility"
onClick={shadowVisibility}
/>
<LabeledButton
label="Reset Camera"
onClick={toggleResetCamera}
value="Reset"
/>
<InputToggle value={roofVisibility} inputKey="1" label="Roof Visibility" onClick={changeRoofVisibility} />
<InputToggle value={wallVisibility} inputKey="2" label="Wall Visibility" onClick={changeWallVisibility} />
<InputToggle value={shadows} inputKey="3" label="Shadows Visibility" onClick={shadowVisibility} />
<LabeledButton label="Reset Camera" onClick={toggleResetCamera} value="Reset" />
<div className="split"></div>
<InputToggle
inputKey="4"
label="Limit Render Distance"
@@ -244,6 +179,18 @@ const GlobalProperties: React.FC = () => {
onPointerUp={updatedDist}
key={"6"}
/>
<div className="split"></div>
<InputRange
label="Fps"
value={fps}
min={CONSTANTS.sceneConfig.minFps}
max={CONSTANTS.sceneConfig.maxFps}
onChange={(value: number) => updateFps(value)}
onPointerUp={() => {}}
key={"5"}
/>
</section>
</div>
);

6
app/src/modules/scene/helpers/StatsHelper.tsx
View File

@@ -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 ? <Perf position="bottom-left" className="scene-performance-stats"/> : null;
return visible ? <Stats className="scene-performance-stats" /> : null;
}

10
app/src/modules/scene/helpers/frameLimiter.tsx
View File

@@ -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 <Stats />;
return null;
}
export default FPSLimiter;

10
app/src/store/scene/useSceneStore.ts
View File

@@ -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<SceneStore>()(
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);

14
app/src/types/world/worldConstants.ts
View File

@@ -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,
};