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

@@ -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 />

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) => {

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);

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)}

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>
     );

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
+export default Setup;