133 lines
3.8 KiB
TypeScript
133 lines
3.8 KiB
TypeScript
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/builder/store";
|
|
import { useKeyboardControls } from "@react-three/drei";
|
|
import switchToThirdPerson from "./switchToThirdPerson";
|
|
import switchToFirstPerson from "./switchToFirstPerson";
|
|
import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";
|
|
import { firstPersonCamera } from "./firstPersonCamera";
|
|
|
|
const CamMode: React.FC = () => {
|
|
const { camMode, setCamMode } = useCamMode();
|
|
const [, get] = useKeyboardControls();
|
|
const [isTransitioning, setIsTransitioning] = useState(false);
|
|
const state: any = useThree();
|
|
const { toggleView } = useToggleView();
|
|
const [isShiftActive, setIsShiftActive] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handlePointerLockChange = async () => {
|
|
if (document.pointerLockElement && !toggleView) {
|
|
// Pointer is locked
|
|
} else if (camMode === "FirstPerson" && !toggleView) {
|
|
// Pointer is unlocked
|
|
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 handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === "Shift") {
|
|
setIsShiftActive(true);
|
|
}
|
|
};
|
|
|
|
const handleKeyUp = (event: KeyboardEvent) => {
|
|
if (event.key === "Shift") {
|
|
setIsShiftActive(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
window.addEventListener("keyup", handleKeyUp);
|
|
|
|
return () => {
|
|
window.removeEventListener("keydown", handleKeyDown);
|
|
window.removeEventListener("keyup", handleKeyUp);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleKeyPress = async (event: KeyboardEvent) => {
|
|
if (!state.controls) return;
|
|
|
|
const keyCombination = detectModifierKeys(event);
|
|
|
|
if (keyCombination === "/" && !isTransitioning && !toggleView) {
|
|
firstPersonCamera({
|
|
setIsTransitioning,
|
|
state,
|
|
camMode,
|
|
setCamMode,
|
|
switchToFirstPerson,
|
|
switchToThirdPerson,
|
|
});
|
|
}
|
|
};
|
|
|
|
window.addEventListener("keydown", handleKeyPress);
|
|
return () => {
|
|
window.removeEventListener("keydown", handleKeyPress);
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [
|
|
camMode,
|
|
isTransitioning,
|
|
toggleView,
|
|
state.controls,
|
|
state.camera,
|
|
setCamMode,
|
|
]);
|
|
|
|
useFrame(() => {
|
|
const { forward, backward, left, right } = get();
|
|
if (!state.controls) return;
|
|
if (camMode === "ThirdPerson" || !document.pointerLockElement) return;
|
|
|
|
const speedMultiplier = isShiftActive ? 4 : 1;
|
|
|
|
if (forward) {
|
|
state.controls.forward(
|
|
CONSTANTS.firstPersonControls.forwardSpeed * speedMultiplier,
|
|
true
|
|
);
|
|
}
|
|
if (backward) {
|
|
state.controls.forward(
|
|
CONSTANTS.firstPersonControls.backwardSpeed * speedMultiplier,
|
|
true
|
|
);
|
|
}
|
|
if (left) {
|
|
state.controls.truck(
|
|
CONSTANTS.firstPersonControls.leftSpeed * speedMultiplier,
|
|
0,
|
|
true
|
|
);
|
|
}
|
|
if (right) {
|
|
state.controls.truck(
|
|
CONSTANTS.firstPersonControls.rightSpeed * speedMultiplier,
|
|
0,
|
|
true
|
|
);
|
|
}
|
|
});
|
|
|
|
return null; // This component does not render any UI
|
|
};
|
|
|
|
export default CamMode;
|