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 { getCameraApi } from "../../../services/factoryBuilder/camera/getCameraApi";
import { useToggleView } from "../../../store/builder/store";

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

    useEffect(() => {
        if (toggleView && controls) {
            (controls as any).mouseButtons.left = CONSTANTS.twoDimension.leftMouse;
            (controls as any).mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
        } else {
            if (!projectId) return;
            getCameraApi(projectId)
                .then((data) => {
                    if (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(() => {
                    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))}
                />
            )}
        </>
    );
}