bug fix

app/src/modules/scene/camera/shortcutsControls/cameraShortcutsControls.tsx

@@ -3,16 +3,12 @@ import { useEffect } from "react";
 import { useThree } from "@react-three/fiber";
 import type { CameraControls } from "@react-three/drei";
 import { useThreeDStore } from "../../../../store/ui/useModuleStore";
-import * as CONSTANTS from "../../../../types/world/worldConstants";
 
 const CameraShortcutsControls = () => {
     const { camera, controls } = useThree();
     const { toggleThreeD, setToggleThreeD } = useThreeDStore();
 
-    const isTextInput = (element: Element | null): boolean =>
+    const isTextInput = (element: Element | null): boolean => element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element?.getAttribute("contenteditable") === "true";
-        element instanceof HTMLInputElement ||
-        element instanceof HTMLTextAreaElement ||
-        element?.getAttribute("contenteditable") === "true";
 
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
@@ -20,7 +16,6 @@ const CameraShortcutsControls = () => {
 
             const cc = controls as CameraControls;
 
-            // get current target
             const target = new Vector3();
             cc.getTarget(target);
 
@@ -45,14 +40,11 @@ const CameraShortcutsControls = () => {
                     LookAt(pos);
                     break;
                 case "Numpad9": {
-                    // Opposite view logic
+                    // Opposite
                     if (Math.abs(dir.z) > Math.abs(dir.x) && Math.abs(dir.z) > Math.abs(dir.y)) {
                         pos = new Vector3(0, 0, -Math.sign(dir.z) * distance).add(target);
                         LookAt(pos);
-                    } else if (
+                    } else if (Math.abs(dir.x) > Math.abs(dir.z) && Math.abs(dir.x) > Math.abs(dir.y)) {
-                        Math.abs(dir.x) > Math.abs(dir.z) &&
-                        Math.abs(dir.x) > Math.abs(dir.y)
-                    ) {
                         pos = new Vector3(-Math.sign(dir.x) * distance, 0, 0).add(target);
                         LookAt(pos);
                     } else {
@@ -62,29 +54,18 @@ const CameraShortcutsControls = () => {
                     break;
                 }
                 case "Numpad5": {
-                    // Only apply when on Top view
-
                     if (!toggleThreeD) {
-                        console.log("cc: ", cc.camera);
                         setToggleThreeD(true);
-                        (cc as any).mouseButtons.left = CONSTANTS.threeDimension.leftMouse;
-                        (cc as any).mouseButtons.right = CONSTANTS.threeDimension.rightMouse;
                     } else {
-                        console.log("cc: ", cc.camera);
+                        cc.setLookAt(0, distance, 0, target.x, target.y, target.z, false).then(() => {
-                        cc.setLookAt(0, distance, 0, target.x, target.y, target.z, false).then(
+                            setToggleThreeD(false);
-                            () => {
+                        });
-                                setToggleThreeD(false);
-                                (cc as any).mouseButtons.left = CONSTANTS.twoDimension.leftMouse;
-                                (cc as any).mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
-                            }
-                        );
                     }
                     break;
                 }
             }
 
             function LookAt(pos: Vector3) {
-                console.log('hi lookat');
                 cc.setLookAt(pos.x, pos.y, pos.z, target.x, target.y, target.z, true);
             }
         };

app/src/modules/scene/camera/switchView.tsx

@@ -45,7 +45,7 @@ export default function SwitchView() {
 
     return (
         <>
-            {(toggleView || !toggleThreeD) ? (
+            {toggleView || !toggleThreeD ? (
                 <OrthographicCamera
                     makeDefault
                     position={CONSTANTS.twoDimension.defaultPosition}

app/src/modules/scene/environment/ground.tsx

@@ -7,26 +7,10 @@ const Ground = ({ plane }: any) => {
 
     return (
         <mesh name="Ground">
-            <mesh
+            <mesh name="Grid" position={!toggleView ? CONSTANTS.gridConfig.position3D : CONSTANTS.gridConfig.position2D}>
-                name="Grid"
+                <gridHelper args={[gridValue.size, gridValue.divisions, CONSTANTS.gridConfig.primaryColor, CONSTANTS.gridConfig.secondaryColor]} />
-                position={!toggleView ? CONSTANTS.gridConfig.position3D : CONSTANTS.gridConfig.position2D}
-            >
-                <gridHelper
-                    args={[
-                        gridValue.size,
-                        gridValue.divisions,
-                        CONSTANTS.gridConfig.primaryColor,
-                        CONSTANTS.gridConfig.secondaryColor,
-                    ]}
-                />
             </mesh>
-            <mesh
+            <mesh ref={plane} rotation-x={CONSTANTS.planeConfig.rotation} position={!toggleView ? CONSTANTS.planeConfig.position3D : CONSTANTS.planeConfig.position2D} name="Plane" receiveShadow>
-                ref={plane}
-                rotation-x={CONSTANTS.planeConfig.rotation}
-                position={!toggleView ? CONSTANTS.planeConfig.position3D : CONSTANTS.planeConfig.position2D}
-                name="Plane"
-                receiveShadow
-            >
                 <planeGeometry args={[planeValue.width, planeValue.height]} />
                 <meshBasicMaterial color={CONSTANTS.planeConfig.color} />
             </mesh>

app/src/modules/scene/environment/shadow.tsx

@@ -61,7 +61,20 @@ export default function Shadows() {
             {/* {(lightRef.current?.shadow) &&
                 <cameraHelper visible={shadows} args={[lightRef.current.shadow.camera]} />
             } */}
-            <directionalLight ref={lightRef} castShadow={shadows} shadow-mapSize-width={CONSTANTS.shadowConfig.shadowmapSizewidth} shadow-mapSize-height={CONSTANTS.shadowConfig.shadowmapSizeheight} shadow-camera-far={CONSTANTS.shadowConfig.shadowcamerafar} shadow-camera-near={CONSTANTS.shadowConfig.shadowcameranear} shadow-camera-top={CONSTANTS.shadowConfig.shadowcameratop} shadow-camera-bottom={CONSTANTS.shadowConfig.shadowcamerabottom} shadow-camera-left={CONSTANTS.shadowConfig.shadowcameraleft} shadow-camera-right={CONSTANTS.shadowConfig.shadowcameraright} shadow-bias={CONSTANTS.shadowConfig.shadowbias} shadow-normalBias={CONSTANTS.shadowConfig.shadownormalBias} />
+            <directionalLight
+                ref={lightRef}
+                castShadow={shadows}
+                shadow-mapSize-width={CONSTANTS.shadowConfig.shadowmapSizewidth}
+                shadow-mapSize-height={CONSTANTS.shadowConfig.shadowmapSizeheight}
+                shadow-camera-far={CONSTANTS.shadowConfig.shadowcamerafar}
+                shadow-camera-near={CONSTANTS.shadowConfig.shadowcameranear}
+                shadow-camera-top={CONSTANTS.shadowConfig.shadowcameratop}
+                shadow-camera-bottom={CONSTANTS.shadowConfig.shadowcamerabottom}
+                shadow-camera-left={CONSTANTS.shadowConfig.shadowcameraleft}
+                shadow-camera-right={CONSTANTS.shadowConfig.shadowcameraright}
+                shadow-bias={CONSTANTS.shadowConfig.shadowbias}
+                shadow-normalBias={CONSTANTS.shadowConfig.shadownormalBias}
+            />
             <object3D ref={targetRef} />
             <mesh position={CONSTANTS.shadowConfig.shadowMaterialPosition} rotation={CONSTANTS.shadowConfig.shadowMaterialRotation} receiveShadow>
                 <planeGeometry args={[planeValue.width, planeValue.height]} />

app/src/modules/scene/environment/sky.tsx

@@ -1,8 +1,8 @@
-import * as THREE from 'three';
+import * as THREE from "three";
 import { Sky } from "@react-three/drei";
 import { useAzimuth, useElevation, useSunPosition } from "../../../store/builder/store";
 import { useEffect, useRef, useState } from "react";
-import * as CONSTANTS from '../../../types/world/worldConstants';
+import * as CONSTANTS from "../../../types/world/worldConstants";
 
 export default function Sun() {
     const savedTheme: string | null = localStorage.getItem("theme");
@@ -24,20 +24,16 @@ export default function Sun() {
 
         sunPositionRef.current.setFromSphericalCoords(1, phi, theta);
         setSunPosition(sunPositionRef.current);
-        forceUpdate(prev => prev + 1);
+        forceUpdate((prev) => prev + 1);
     }, [elevation, azimuth]);
 
     return (
         <>
-            {(azimuth !== undefined && elevation !== undefined && savedTheme !== "dark") && (
+            {azimuth !== undefined && elevation !== undefined && savedTheme !== "dark" && (
                 <>
                     <Sky
                         distance={CONSTANTS.skyConfig.skyDistance}
-                        sunPosition={[
+                        sunPosition={[sunPositionRef.current.x, sunPositionRef.current.y, sunPositionRef.current.z]}
-                            sunPositionRef.current.x,
-                            sunPositionRef.current.y,
-                            sunPositionRef.current.z,
-                        ]}
                         turbidity={turbidity}
                         rayleigh={CONSTANTS.skyConfig.defaultRayleigh}
                         mieCoefficient={CONSTANTS.skyConfig.mieCoefficient}

app/src/modules/scene/postProcessing/postProcessing.tsx

@@ -1,20 +1,16 @@
+import { useEffect } from "react";
 import { DepthOfField, Bloom, EffectComposer, N8AO } from "@react-three/postprocessing";
-// import OutlineInstances from "./outlineInstances/outlineInstances";
 import OutlineInstances from "./outlineInstances/outlineInstances";
 import { useDeletableEventSphere, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
-import { useEffect } from "react";
 
 export default function PostProcessing() {
     const { selectedEventSphere } = useSelectedEventSphere();
     const { deletableEventSphere } = useDeletableEventSphere();
 
-    useEffect(() => {
+    useEffect(() => {}, [selectedEventSphere, deletableEventSphere]);
-
-    }, [selectedEventSphere, deletableEventSphere])
 
     return (
         <EffectComposer autoClear={false}>
-
             <N8AO color="black" aoRadius={20} intensity={7} distanceFalloff={4} aoSamples={32} denoiseRadius={6} denoiseSamples={16} />
 
             {/* <DepthOfField focusDistance={0} focalLength={0.15} bokehScale={2} /> */}
@@ -22,7 +18,6 @@ export default function PostProcessing() {
             {/* <Bloom intensity={0.1} luminanceThreshold={0.9} luminanceSmoothing={0.025} mipmapBlur={false} /> */}
 
             <OutlineInstances />
-
         </EffectComposer>
     );
-};
+}