Spaces:
Sleeping
Sleeping
| import { useRef, useEffect, useState, forwardRef, useImperativeHandle, useCallback } from 'react' | |
| import { useFrame, useThree } from '@react-three/fiber' | |
| import * as THREE from 'three' | |
| import { useCameraGestures } from '../camera/useCameraGestures' | |
| import { cameraFocusTarget } from '../camera/cameraFocus' | |
| import { useDebugStore } from '../../store/debug' | |
| import { isEditableTarget } from '../../utils/dom' | |
| import { CHARACTER_SPAWN } from './spawn' | |
| export interface FlyControllerHandle { | |
| reset: () => void | |
| } | |
| interface FlyControllerProps { | |
| preserveCameraOnMount?: boolean | |
| } | |
| const SPEED = 6 | |
| const SHIFT_MULT = 3 | |
| const SMOOTH = 0.12 | |
| const DOLLY_UNITS_PER_PIXEL = 0.02 | |
| const DEFAULT_YAW = 0 | |
| const _forward = new THREE.Vector3() | |
| const _dollyForward = new THREE.Vector3() | |
| const _right = new THREE.Vector3() | |
| const _up = new THREE.Vector3(0, 1, 0) | |
| const _move = new THREE.Vector3() | |
| const _euler = new THREE.Euler(0, 0, 0, 'YXZ') | |
| export const FlyController = forwardRef<FlyControllerHandle, FlyControllerProps>(function FlyController({ preserveCameraOnMount = false }, ref) { | |
| const { camera, gl } = useThree() | |
| const mouseSensitivity = useDebugStore((s) => s.flyMouseSensitivity) | |
| const keys = useRef(new Set<string>()) | |
| const rawYaw = useRef(0) | |
| const rawPitch = useRef(0) | |
| const smoothYaw = useRef(0) | |
| const smoothPitch = useRef(0) | |
| const touchLook = useRef<{ id: number; x: number; y: number } | null>(null) | |
| const touchMove = useRef<{ id: number; x: number; y: number } | null>(null) | |
| const [joystickPos, setJoystickPos] = useState({ x: 0, y: 0 }) | |
| const reset = useCallback(() => { | |
| let spawnX = CHARACTER_SPAWN.x | |
| let spawnY = CHARACTER_SPAWN.y | |
| let spawnZ = CHARACTER_SPAWN.z | |
| let spawnYaw = DEFAULT_YAW | |
| let spawnPitch = 0 | |
| if (typeof window !== 'undefined') { | |
| const params = new URLSearchParams(window.location.search) | |
| const spawnParam = params.get('spawn') | |
| if (spawnParam) { | |
| const parts = spawnParam.split(',').map(parseFloat) | |
| if (parts.length >= 3 && !parts.slice(0, 3).some(isNaN)) { | |
| spawnX = parts[0] | |
| spawnY = parts[1] | |
| spawnZ = parts[2] | |
| } | |
| if (parts.length >= 5 && !parts.slice(3, 5).some(isNaN)) { | |
| spawnYaw = parts[3] | |
| spawnPitch = parts[4] | |
| } | |
| } | |
| } | |
| camera.position.set(spawnX, spawnY, spawnZ) | |
| cameraFocusTarget.current = null | |
| keys.current.clear() | |
| rawYaw.current = spawnYaw | |
| rawPitch.current = spawnPitch | |
| smoothYaw.current = spawnYaw | |
| smoothPitch.current = spawnPitch | |
| camera.quaternion.setFromEuler(_euler.set(spawnPitch, spawnYaw, 0)) | |
| }, [camera]) | |
| const preserveCamera = useCallback(() => { | |
| cameraFocusTarget.current = null | |
| keys.current.clear() | |
| _euler.setFromQuaternion(camera.quaternion, 'YXZ') | |
| rawYaw.current = _euler.y | |
| rawPitch.current = _euler.x | |
| smoothYaw.current = _euler.y | |
| smoothPitch.current = _euler.x | |
| }, [camera]) | |
| const applyDolly = useCallback((deltaY: number) => { | |
| _dollyForward.set(0, 0, -1).applyQuaternion(camera.quaternion).normalize() | |
| camera.position.addScaledVector(_dollyForward, -deltaY * DOLLY_UNITS_PER_PIXEL) | |
| }, [camera]) | |
| const applyTumble = useCallback((dx: number, dy: number) => { | |
| cameraFocusTarget.current = null | |
| rawYaw.current -= dx * mouseSensitivity | |
| rawPitch.current -= dy * mouseSensitivity | |
| rawPitch.current = Math.max(-Math.PI / 2.2, Math.min(Math.PI / 2.2, rawPitch.current)) | |
| }, [mouseSensitivity]) | |
| useCameraGestures({ domElement: gl.domElement, onDollyPixels: applyDolly, onTumblePixels: applyTumble }) | |
| useImperativeHandle(ref, () => ({ | |
| reset, | |
| }), [reset]) | |
| useEffect(() => { | |
| if (preserveCameraOnMount) preserveCamera() | |
| else reset() | |
| }, [preserveCamera, preserveCameraOnMount, reset]) | |
| useEffect(() => { | |
| const onKey = (e: KeyboardEvent) => { | |
| if (isEditableTarget(e.target)) { | |
| keys.current.delete(e.code) | |
| return | |
| } | |
| if (e.type === 'keydown') keys.current.add(e.code) | |
| else keys.current.delete(e.code) | |
| } | |
| window.addEventListener('keydown', onKey) | |
| window.addEventListener('keyup', onKey) | |
| const onTouchStart = (e: TouchEvent) => { | |
| for (const touch of Array.from(e.changedTouches)) { | |
| const isLeft = touch.clientX < window.innerWidth / 2 | |
| if (isLeft && !touchMove.current) { | |
| touchMove.current = { id: touch.identifier, x: touch.clientX, y: touch.clientY } | |
| setJoystickPos({ x: touch.clientX, y: touch.clientY }) | |
| } else if (!isLeft && !touchLook.current) { | |
| touchLook.current = { id: touch.identifier, x: touch.clientX, y: touch.clientY } | |
| } | |
| } | |
| } | |
| const onTouchMove = (e: TouchEvent) => { | |
| for (const touch of Array.from(e.changedTouches)) { | |
| if (touchLook.current?.id === touch.identifier) { | |
| const dx = touch.clientX - touchLook.current.x | |
| const dy = touch.clientY - touchLook.current.y | |
| rawYaw.current -= dx * 0.004 | |
| rawPitch.current -= dy * 0.004 | |
| rawPitch.current = Math.max(-Math.PI / 2.2, Math.min(Math.PI / 2.2, rawPitch.current)) | |
| touchLook.current = { id: touch.identifier, x: touch.clientX, y: touch.clientY } | |
| } | |
| if (touchMove.current?.id === touch.identifier) { | |
| touchMove.current = { ...touchMove.current, x: touch.clientX, y: touch.clientY } | |
| } | |
| } | |
| } | |
| const onTouchEnd = (e: TouchEvent) => { | |
| for (const touch of Array.from(e.changedTouches)) { | |
| if (touchLook.current?.id === touch.identifier) touchLook.current = null | |
| if (touchMove.current?.id === touch.identifier) { | |
| touchMove.current = null | |
| setJoystickPos({ x: 0, y: 0 }) | |
| } | |
| } | |
| } | |
| gl.domElement.addEventListener('touchstart', onTouchStart, { passive: true }) | |
| gl.domElement.addEventListener('touchmove', onTouchMove, { passive: true }) | |
| gl.domElement.addEventListener('touchend', onTouchEnd, { passive: true }) | |
| return () => { | |
| window.removeEventListener('keydown', onKey) | |
| window.removeEventListener('keyup', onKey) | |
| gl.domElement.removeEventListener('touchstart', onTouchStart) | |
| gl.domElement.removeEventListener('touchmove', onTouchMove) | |
| gl.domElement.removeEventListener('touchend', onTouchEnd) | |
| } | |
| }, [gl]) | |
| useFrame((_state, delta) => { | |
| // Camera focus: lerp rawYaw/rawPitch toward clicked object (only when pointer is not locked) | |
| const focusTarget = cameraFocusTarget.current | |
| if (focusTarget && document.pointerLockElement !== gl.domElement) { | |
| const dir = new THREE.Vector3().subVectors(focusTarget, camera.position).normalize() | |
| const targetPitch = Math.asin(Math.max(-1, Math.min(1, dir.y))) | |
| const targetYaw = Math.atan2(-dir.x, -dir.z) | |
| const t = 1 - Math.pow(0.04, delta) // ~smooth decay | |
| // wrap yaw diff to [-π, π] to avoid spinning the long way | |
| const yawDiff = ((targetYaw - rawYaw.current + Math.PI * 3) % (Math.PI * 2)) - Math.PI | |
| rawYaw.current += yawDiff * t | |
| rawPitch.current += (targetPitch - rawPitch.current) * t | |
| rawPitch.current = Math.max(-Math.PI / 2.2, Math.min(Math.PI / 2.2, rawPitch.current)) | |
| if (Math.abs(yawDiff * t) < 0.0005 && Math.abs((targetPitch - rawPitch.current) * t) < 0.0005) { | |
| cameraFocusTarget.current = null | |
| } | |
| } | |
| smoothYaw.current += (rawYaw.current - smoothYaw.current) * (1 - Math.pow(1 - SMOOTH, 1)) | |
| smoothPitch.current += (rawPitch.current - smoothPitch.current) * (1 - Math.pow(1 - SMOOTH, 1)) | |
| _euler.set(smoothPitch.current, smoothYaw.current, 0) | |
| camera.quaternion.setFromEuler(_euler) | |
| let fwd = 0, strafe = 0, vert = 0 | |
| const k = keys.current | |
| if (k.has('KeyW') || k.has('ArrowUp')) fwd += 1 | |
| if (k.has('KeyS') || k.has('ArrowDown')) fwd -= 1 | |
| if (k.has('KeyA') || k.has('ArrowLeft')) strafe -= 1 | |
| if (k.has('KeyD') || k.has('ArrowRight')) strafe += 1 | |
| if (k.has('KeyE')) vert += 1 | |
| if (k.has('KeyQ')) vert -= 1 | |
| if (touchMove.current) { | |
| const origin = joystickPos | |
| const dx = (touchMove.current.x - origin.x) / 50 | |
| const dy = (touchMove.current.y - origin.y) / 50 | |
| strafe += Math.max(-1, Math.min(1, dx)) | |
| fwd -= Math.max(-1, Math.min(1, dy)) | |
| } | |
| _forward.set(0, 0, -1).applyQuaternion(camera.quaternion) | |
| _right.set(1, 0, 0).applyQuaternion(camera.quaternion) | |
| _move.set(0, 0, 0) | |
| .addScaledVector(_forward, fwd) | |
| .addScaledVector(_right, strafe) | |
| .addScaledVector(_up, vert) | |
| if (_move.lengthSq() > 1) _move.normalize() | |
| const speed = SPEED * (k.has('ShiftLeft') || k.has('ShiftRight') ? SHIFT_MULT : 1) | |
| camera.position.addScaledVector(_move, speed * delta) | |
| }) | |
| return null | |
| }) | |