Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Refactor camera controls and view switching; enhance event handling for improved user experience and state management

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-07-31 13:38:50 +05:30
parent 3cfde617cc
commit 5b62f54769
5 changed files with 135 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
app/src/modules/scene/camera/camMode.tsx
View File

@@ -9,124 +9,89 @@ import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKe
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);
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);
}
};
useEffect(() => {
const handlePointerLockChange = async () => {
if (document.pointerLockElement && !toggleView) {
} else if (camMode === "FirstPerson" && !toggleView) {
setCamMode("ThirdPerson");
await switchToThirdPerson(state.controls, state.camera);
}
};
document.addEventListener("pointerlockchange", handlePointerLockChange);
document.addEventListener("pointerlockchange", handlePointerLockChange);
return () => {
document.removeEventListener(
"pointerlockchange",
handlePointerLockChange
);
};
}, [camMode, toggleView, setCamMode, state.controls, state.camera]);
return () => {
document.removeEventListener("pointerlockchange", handlePointerLockChange);
};
}, [camMode, toggleView, setCamMode, state.controls, state.camera]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Shift") {
setIsShiftActive(true);
}
};
useEffect(() => {
const handleKeyPress = async (event: KeyboardEvent) => {
if (!state.controls) return;
const handleKeyUp = (event: KeyboardEvent) => {
if (event.key === "Shift") {
setIsShiftActive(false);
}
};
const keyCombination = detectModifierKeys(event);
window.addEventListener("keydown", handleKeyDown);
window.addEventListener("keyup", handleKeyUp);
if (keyCombination === "/" && !isTransitioning && !toggleView) {
firstPersonCamera({
setIsTransitioning,
state,
camMode,
setCamMode,
switchToFirstPerson,
switchToThirdPerson,
});
}
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener("keyup", handleKeyUp);
};
}, []);
if (keyCombination === 'Shift') {
setIsShiftActive(true);
}
};
useEffect(() => {
const handleKeyPress = async (event: KeyboardEvent) => {
if (!state.controls) return;
const handleKeyUp = (event: KeyboardEvent) => {
if (event.key === "Shift") {
setIsShiftActive(false);
}
};
const keyCombination = detectModifierKeys(event);
window.addEventListener("keydown", handleKeyPress);
window.addEventListener("keyup", handleKeyUp);
if (keyCombination === "/" && !isTransitioning && !toggleView) {
firstPersonCamera({
setIsTransitioning,
state,
camMode,
setCamMode,
switchToFirstPerson,
switchToThirdPerson,
});
}
};
return () => {
window.removeEventListener("keydown", handleKeyPress);
window.removeEventListener("keyup", handleKeyUp);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [camMode, isTransitioning, toggleView, state.controls, state.camera, setCamMode]);
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;
useFrame(() => {
const { forward, backward, left, right } = get();
if (!state.controls) return;
if (camMode === "ThirdPerson" || !document.pointerLockElement) return;
const speedMultiplier = isShiftActive ? 4 : 1;
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);
}
});
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
return null;
};
export default CamMode;