Dwinzo_dev/app/src/modules/scene/camera/camMode.tsx

import { useFrame, useThree } from '@react-three/fiber';
import React, { useEffect, useState } from 'react';
import * as CONSTANTS from '../../../types/world/worldConstants';
import { useCamMode, useToggleView } from '../../../store/store';
import { useKeyboardControls } from '@react-three/drei';
import switchToThirdPerson from './switchToThirdPerson';
import switchToFirstPerson from './switchToFirstPerson';

const CamMode: React.FC = () => {
    const { camMode, setCamMode } = useCamMode();
    const [, get] = useKeyboardControls()
    const [isTransitioning, setIsTransitioning] = useState(false);
    const state: any = useThree();
    const { toggleView } = useToggleView();

    useEffect(() => {
        const handlePointerLockChange = async () => {
            if (document.pointerLockElement && !toggleView) {
                // console.log('Pointer is locked');
            } else {
                // console.log('Pointer is unlocked');
                if (camMode === "FirstPerson" && !toggleView) {
                    setCamMode("ThirdPerson");
                    await switchToThirdPerson(state.controls, state.camera);
                }
            }
        };

        document.addEventListener('pointerlockchange', handlePointerLockChange);

        return () => {
            document.removeEventListener('pointerlockchange', handlePointerLockChange);
        };
    }, [camMode, toggleView, setCamMode, state.controls, state.camera]);

    useEffect(() => {
        const handleKeyPress = async (event: any) => {
            if (!state.controls) return;

            if (event.key === "/" && !isTransitioning && !toggleView) {
                setIsTransitioning(true);
                state.controls.mouseButtons.left = CONSTANTS.controlsTransition.leftMouse;
                state.controls.mouseButtons.right = CONSTANTS.controlsTransition.rightMouse;
                state.controls.mouseButtons.wheel = CONSTANTS.controlsTransition.wheelMouse;
                state.controls.mouseButtons.middle = CONSTANTS.controlsTransition.middleMouse;

                if (camMode === 'ThirdPerson') {
                    setCamMode("FirstPerson");
                    await switchToFirstPerson(state.controls, state.camera);
                } else if (camMode === "FirstPerson") {
                    setCamMode("ThirdPerson");
                    await switchToThirdPerson(state.controls, state.camera);
                }

                setIsTransitioning(false);
            }
        };

        window.addEventListener("keydown", handleKeyPress);
        return () => {
            window.removeEventListener("keydown", handleKeyPress);
        };
    }, [camMode, isTransitioning, toggleView, state.controls, state.camera, setCamMode]);

    useFrame(() => {
        const { forward, backward, left, right } = get();
        if (!state.controls) return
        if (!state.controls || camMode === "ThirdPerson" || !document.pointerLockElement) return;

        if (forward) {
            state.controls.forward(CONSTANTS.firstPersonControls.forwardSpeed, true)
        }
        if (backward) {
            state.controls.forward(CONSTANTS.firstPersonControls.backwardSpeed, true)
        }
        if (left) {
            state.controls.truck(CONSTANTS.firstPersonControls.leftSpeed, 0, true)
        }
        if (right) {
            state.controls.truck(CONSTANTS.firstPersonControls.rightSpeed, 0, true)
        }
    });

    return (
        <></>
    );
};

export default CamMode;