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'; import { detectModifierKeys } from '../../../utils/shortcutkeys/detectModifierKeys'; 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; const keyCombination = detectModifierKeys(event); if (keyCombination === "/" && !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 null; // This component does not render any UI }; export default CamMode;