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

import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import * as THREE from 'three';
import { PerspectiveCamera, OrthographicCamera, CameraControls } from '@react-three/drei';
import { useParams } from "react-router-dom";
import * as CONSTANTS from '../../../types/world/worldConstants';
import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
import { getUserData } from "../../../functions/getUserData";
import { useToggleView } from "../../../store/builder/store";

export default function SwitchView() {
    const { toggleView } = useToggleView();
    const { controls } = useThree();
    const { projectId } = useParams();
    const { organization } = getUserData();

    useEffect(() => {
        if (toggleView && controls) {
            (controls as any).mouseButtons.left = CONSTANTS.twoDimension.leftMouse;
            (controls as any).mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
        } else {
            try {
                getCamera(organization, localStorage.getItem('userId')!, projectId).then((data) => {
                    if (data && data.position && data.target) {
                        (controls as CameraControls)?.setPosition(data.position.x, data.position.y, data.position.z);
                        (controls as CameraControls)?.setTarget(data.target.x, data.target.y, data.target.z);
                    } else {
                        (controls as CameraControls)?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
                        (controls as CameraControls)?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
                    }
                });
            } catch (error) {
                echo.error("Failed to retrieve camera position or target");
                (controls as CameraControls)?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
                (controls as CameraControls)?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
            }

            if (controls) {
                (controls as any).mouseButtons.left = CONSTANTS.threeDimension.leftMouse;
                (controls as any).mouseButtons.right = CONSTANTS.threeDimension.rightMouse;
            }
        }
    }, [toggleView, controls]);

    return (
        <>
            {toggleView ? (
                <OrthographicCamera
                    makeDefault
                    position={CONSTANTS.twoDimension.defaultPosition}
                    zoom={10}
                    near={0.01}
                    far={1000}
                    onUpdate={(self) => self.lookAt(new THREE.Vector3(...CONSTANTS.twoDimension.defaultTarget))}
                />
            ) : (
                <PerspectiveCamera
                    makeDefault
                    fov={75}
                    position={CONSTANTS.threeDimension.defaultPosition}
                    near={0.01}
                    far={1000}
                    onUpdate={(self) => self.lookAt(new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget))}
                />
            )}
        </>
    );
}