From 7c3d9e1d9615b576641850ae6c682f383c19e305 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 1 Aug 2025 12:00:13 +0530
Subject: [PATCH] feat: Optimize event listeners in AssetsGroup and streamline
 model loading; enhance sky and scene components with adaptive features

---
 app/src/modules/builder/asset/assetsGroup.tsx           | 2 +-
 app/src/modules/builder/asset/models/model/model.tsx    | 3 +--
 app/src/modules/scene/environment/sky.tsx               | 6 +++---
 app/src/modules/scene/postProcessing/postProcessing.tsx | 9 ++++++++-
 app/src/modules/scene/scene.tsx                         | 4 +++-
 app/src/modules/scene/setup/setup.tsx                   | 8 ++++++--
 6 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/app/src/modules/builder/asset/assetsGroup.tsx b/app/src/modules/builder/asset/assetsGroup.tsx
index 89f7471..0215a9f 100644
--- a/app/src/modules/builder/asset/assetsGroup.tsx
+++ b/app/src/modules/builder/asset/assetsGroup.tsx
@@ -345,7 +345,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
             canvasElement.removeEventListener("mousemove", onMouseMove);
             canvasElement.removeEventListener("mouseup", onMouseUp);
         };
-    }, [selectedItem, camera, pointer, activeModule, controls, isRenameMode]);
+    }, [selectedItem, camera, activeModule, controls, isRenameMode]);
 
     return (
         <Models />
diff --git a/app/src/modules/builder/asset/models/model/model.tsx b/app/src/modules/builder/asset/models/model/model.tsx
index 1679b10..96c6325 100644
--- a/app/src/modules/builder/asset/models/model/model.tsx
+++ b/app/src/modules/builder/asset/models/model/model.tsx
@@ -162,8 +162,7 @@ function Model({ asset, isRendered }: { readonly asset: Asset, isRendered: boole
                         console.error(`[Backend] Error storing/loading ${asset.modelName}:`, error);
                     }
                 };
-                loader.load(
-                    modelUrl,
+                loader.load(modelUrl,
                     handleBackendLoad,
                     undefined,
                     (error) => {
diff --git a/app/src/modules/scene/environment/sky.tsx b/app/src/modules/scene/environment/sky.tsx
index 4a584ee..ee7f2d9 100644
--- a/app/src/modules/scene/environment/sky.tsx
+++ b/app/src/modules/scene/environment/sky.tsx
@@ -6,9 +6,9 @@ import * as CONSTANTS from '../../../types/world/worldConstants';
 
 export default function Sun() {
     const savedTheme: string | null = localStorage.getItem("theme");
-    const { elevation, setElevation } = useElevation();
-    const { sunPosition, setSunPosition } = useSunPosition();
-    const { azimuth, setAzimuth } = useAzimuth();
+    const { elevation } = useElevation();
+    const { setSunPosition } = useSunPosition();
+    const { azimuth } = useAzimuth();
     const [turbidity, setTurbidity] = useState(CONSTANTS.skyConfig.defaultTurbidity);
     const sunPositionRef = useRef(new THREE.Vector3(0, 0, 0));
     const [_, forceUpdate] = useState(0);
diff --git a/app/src/modules/scene/postProcessing/postProcessing.tsx b/app/src/modules/scene/postProcessing/postProcessing.tsx
index c70f733..297a4c2 100644
--- a/app/src/modules/scene/postProcessing/postProcessing.tsx
+++ b/app/src/modules/scene/postProcessing/postProcessing.tsx
@@ -1,4 +1,5 @@
-import { EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
+import { DepthOfField, EffectComposer, GodRays, N8AO, Outline } from "@react-three/postprocessing";
+import { useThree } from "@react-three/fiber";
 import { BlendFunction } from "postprocessing";
 import {
     useDeletableFloorItem,
@@ -11,6 +12,7 @@ import { useEffect } from "react";
 import { useBuilderStore } from "../../../store/builder/useBuilderStore";
 
 export default function PostProcessing() {
+    const { scene } = useThree();
     const { selectedPoints } = useSelectedPoints();
     const { deletableFloorItem } = useDeletableFloorItem();
     const { selectedWallItem } = useSelectedWallItem();
@@ -77,6 +79,11 @@ export default function PostProcessing() {
                 denoiseRadius={6}
                 denoiseSamples={16}
             />
+            <DepthOfField
+                focusDistance={0}
+                focalLength={0.15}
+                bokehScale={2}
+            />
             {selectedWallAsset && (
                 <Outline
                     selection={flattenChildren(selectedWallAsset.children)}
diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx
index 499aef5..57b4ee1 100644
--- a/app/src/modules/scene/scene.tsx
+++ b/app/src/modules/scene/scene.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { Canvas } from "@react-three/fiber";
-import { KeyboardControls } from "@react-three/drei";
+import { KeyboardControls, Stats } from "@react-three/drei";
 import { useSceneContext } from "./sceneContext";
 
 import Builder from "../builder/builder";
@@ -64,6 +64,7 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
                 onContextMenu={(e) => {
                     e.preventDefault();
                 }}
+                performance={{ min: 0.9, max: 1.0 }}
                 onCreated={(e) => {
                     e.scene.background = layout === 'Main Layout' ? null : new Color(0x19191d);
                 }}
@@ -74,6 +75,7 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
                 <Builder />
                 <Simulation />
                 <Visualization />
+                <Stats />
             </Canvas>
         </KeyboardControls>
     );
diff --git a/app/src/modules/scene/setup/setup.tsx b/app/src/modules/scene/setup/setup.tsx
index 184bc56..431b192 100644
--- a/app/src/modules/scene/setup/setup.tsx
+++ b/app/src/modules/scene/setup/setup.tsx
@@ -2,7 +2,7 @@ import Sun from '../environment/sky'
 import Shadows from '../environment/shadow'
 import PostProcessing from '../postProcessing/postProcessing'
 import Controls from '../controls/controls';
-import { Environment } from '@react-three/drei'
+import { AdaptiveDpr, AdaptiveEvents, Environment } from '@react-three/drei'
 
 import background from "../../../assets/textures/hdr/mudroadpuresky2k.hdr";
 
@@ -20,8 +20,12 @@ function Setup() {
             {/* <MovingClouds /> */}
 
             <Environment files={background} environmentIntensity={1.5} />
+
+            <AdaptiveEvents />
+
+            <AdaptiveDpr pixelated />
         </>
     )
 }
 
-export default Setup
\ No newline at end of file
+export default Setup;
\ No newline at end of file