math-pixel/La-Fabrik
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

update : add map model + octree algo

Browse Source
This commit is contained in:
Tom Boullay
2026-04-17 11:36:03 +02:00
parent ed7681a293
commit 20fbaf05e1
10 changed files with 319 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/world/player/PlayerCamera.tsx
+1
View File
@@ -2,6 +2,7 @@ import { useEffect } from "react";
import { PointerLockControls } from "@react-three/drei";
export const PLAYER_EYE_HEIGHT = 1.75;
export const PLAYER_CAPSULE_RADIUS = 0.35;
export function PlayerCamera(): React.JSX.Element {
useEffect(() => {
src/world/player/PlayerComponent.tsx
+14 -5
View File
@@ -1,19 +1,28 @@
import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import { PlayerCamera, PLAYER_EYE_HEIGHT } from "@/world/player/PlayerCamera";
import type { Octree } from "three/addons/math/Octree.js";
import { PlayerCamera } from "@/world/player/PlayerCamera";
import { PlayerController } from "@/world/player/PlayerController";
export function PlayerComponent(): React.JSX.Element {
interface PlayerComponentProps {
octree?: Octree | null;
spawnY?: number;
}
export function PlayerComponent({
octree = null,
spawnY = 100,
}: PlayerComponentProps): React.JSX.Element {
const camera = useThree((state) => state.camera);
useEffect(() => {
camera.position.set(0, PLAYER_EYE_HEIGHT, 0);
}, [camera]);
camera.position.set(0, spawnY, 0);
}, [camera, spawnY]);
return (
<>
<PlayerCamera />
<PlayerController />
<PlayerController octree={octree} />
</>
);
}
src/world/player/PlayerController.tsx
+108 -51
View File
@@ -1,13 +1,18 @@
import { useEffect, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import { Capsule } from "three/addons/math/Capsule.js";
import type { Octree } from "three/addons/math/Octree.js";
import { InteractionManager } from "@/stateManager/InteractionManager";
import { PLAYER_EYE_HEIGHT } from "@/world/player/PlayerCamera";
import {
PLAYER_EYE_HEIGHT,
PLAYER_CAPSULE_RADIUS,
} from "@/world/player/PlayerCamera";
const MOVE_SPEED = 5;
const GRAVITY = -20;
const JUMP_VELOCITY = 7;
const FLOOR_Y = 0;
const WALK_SPEED = 11;
const AIR_CONTROL = 0.35;
const JUMP_SPEED = 9;
const GRAVITY = 30;
type Keys = {
forward: boolean;
@@ -25,15 +30,43 @@ const DEFAULT_KEYS: Keys = {
jump: false,
};
export function PlayerController(): null {
interface PlayerControllerProps {
octree: Octree | null;
}
const _forward = new THREE.Vector3();
const _right = new THREE.Vector3();
const _wishDir = new THREE.Vector3();
const _up = new THREE.Vector3(0, 1, 0);
const _translateVec = new THREE.Vector3();
export function PlayerController({ octree }: PlayerControllerProps): null {
const camera = useThree((state) => state.camera);
const keys = useRef<Keys>({ ...DEFAULT_KEYS });
const velocityY = useRef(0);
const isGrounded = useRef(false);
const forward = useRef(new THREE.Vector3());
const right = useRef(new THREE.Vector3());
const movement = useRef(new THREE.Vector3());
const up = useRef(new THREE.Vector3(0, 1, 0));
const velocity = useRef(new THREE.Vector3());
const onFloor = useRef(false);
const wantsJump = useRef(false);
// Capsule: start = feet, end = eyes
const capsule = useRef(
new Capsule(
new THREE.Vector3(0, PLAYER_CAPSULE_RADIUS, 0),
new THREE.Vector3(0, PLAYER_EYE_HEIGHT - PLAYER_CAPSULE_RADIUS, 0),
PLAYER_CAPSULE_RADIUS,
),
);
// Sync capsule to camera spawn position on mount
useEffect(() => {
const spawnY = camera.position.y;
capsule.current.start.set(
0,
spawnY - PLAYER_EYE_HEIGHT + PLAYER_CAPSULE_RADIUS,
0,
);
capsule.current.end.set(0, spawnY, 0);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
const interaction = InteractionManager.getInstance();
@@ -53,7 +86,7 @@ export function PlayerController(): null {
keys.current.right = true;
break;
case " ":
keys.current.jump = true;
wantsJump.current = true;
break;
case "e":
if (interaction.getState().focused?.kind === "trigger") {
@@ -63,7 +96,6 @@ export function PlayerController(): null {
default:
return;
}
event.preventDefault();
};
@@ -89,13 +121,11 @@ export function PlayerController(): null {
default:
return;
}
event.preventDefault();
};
const handleMouseDown = (event: MouseEvent): void => {
if (event.button !== 0) return;
if (interaction.getState().focused?.kind === "grab") {
interaction.pressInteract();
}
@@ -103,7 +133,6 @@ export function PlayerController(): null {
const handleMouseUp = (event: MouseEvent): void => {
if (event.button !== 0) return;
if (interaction.getState().holding) {
interaction.releaseInteract();
}
@@ -124,47 +153,75 @@ export function PlayerController(): null {
}, []);
useFrame((_, delta) => {
const currentForward = forward.current;
const currentRight = right.current;
const currentMovement = movement.current;
// Clamp delta so physics don't explode on tab focus regain
const dt = Math.min(delta, 0.05);
camera.getWorldDirection(currentForward);
currentForward.setY(0);
if (currentForward.lengthSq() > 0) {
currentForward.normalize();
currentRight.crossVectors(currentForward, up.current).normalize();
// Compute wish direction from camera yaw (XZ only)
camera.getWorldDirection(_forward);
_forward.setY(0);
if (_forward.lengthSq() > 0) {
_forward.normalize();
_right.crossVectors(_forward, _up).normalize();
}
currentMovement.set(0, 0, 0);
_wishDir.set(0, 0, 0);
if (keys.current.forward) _wishDir.add(_forward);
if (keys.current.backward) _wishDir.sub(_forward);
if (keys.current.left) _wishDir.sub(_right);
if (keys.current.right) _wishDir.add(_right);
if (_wishDir.lengthSq() > 0) _wishDir.normalize();
if (keys.current.forward) currentMovement.add(currentForward);
if (keys.current.backward) currentMovement.sub(currentForward);
if (keys.current.left) currentMovement.sub(currentRight);
if (keys.current.right) currentMovement.add(currentRight);
// Accelerate horizontally
const accel = onFloor.current ? WALK_SPEED : WALK_SPEED * AIR_CONTROL;
velocity.current.x += _wishDir.x * accel * dt * 9;
velocity.current.z += _wishDir.z * accel * dt * 9;
if (currentMovement.lengthSq() > 0) {
currentMovement.normalize().multiplyScalar(MOVE_SPEED * delta);
camera.position.add(currentMovement);
// Exponential damping on XZ
const damping = Math.exp(-8 * dt);
velocity.current.x *= damping;
velocity.current.z *= damping;
// Gravity + jump
if (onFloor.current) {
velocity.current.y = Math.max(0, velocity.current.y);
if (wantsJump.current) {
velocity.current.y = JUMP_SPEED;
onFloor.current = false;
}
} else {
velocity.current.y -= GRAVITY * dt;
}
wantsJump.current = false;
// Move capsule
_translateVec.copy(velocity.current).multiplyScalar(dt);
capsule.current.translate(_translateVec);
// Resolve collisions against octree
if (octree) {
const result = octree.capsuleIntersect(capsule.current);
onFloor.current = false;
if (result) {
onFloor.current = result.normal.y > 0;
if (!onFloor.current) {
// Cancel velocity component going into the wall
const vn = result.normal.dot(velocity.current);
velocity.current.addScaledVector(result.normal, -vn);
} else {
velocity.current.y = Math.max(0, velocity.current.y);
}
// Push capsule out of geometry
capsule.current.translate(
result.normal.clone().multiplyScalar(result.depth),
);
}
}
const groundY = FLOOR_Y + PLAYER_EYE_HEIGHT;
isGrounded.current = camera.position.y <= groundY + 0.01;
if (keys.current.jump && isGrounded.current) {
velocityY.current = JUMP_VELOCITY;
keys.current.jump = false;
}
if (!isGrounded.current) {
velocityY.current += GRAVITY * delta;
} else if (velocityY.current < 0) {
velocityY.current = 0;
}
camera.position.setY(
Math.max(groundY, camera.position.y + velocityY.current * delta),
);
// Sync camera to capsule top (eye position)
camera.position.copy(capsule.current.end);
});
return null;