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

refacto: enleve la map

Browse Source
This commit is contained in:
Tom Boullay
2026-04-16 16:11:20 +02:00
parent 1eed905e8b
commit b26da614f0
10 changed files with 66 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/debug/Debug.ts
+12 -2
View File
@@ -7,6 +7,7 @@ export class Debug {
public readonly active: boolean;
private readonly gui: GUI | null;
private readonly folders = new Map<string, GUI>();
private readonly registeredFolders = new Set<string>();
private readonly listeners = new Set<() => void>();
private readonly controls: { cameraMode: CameraMode } = {
cameraMode: "player",
@@ -41,13 +42,22 @@ export class Debug {
}
}
createFolder(name: string): GUI;
createFolder(name: string): GUI | null;
/**
* Creates a named GUI folder. Returns the folder on first call, null on
* subsequent calls with the same name — callers should skip `.add()` when
* null is returned to avoid duplicating controls under StrictMode double-mount.
*/
createFolder(name: string): GUI | null {
if (!this.gui) {
return null;
}
if (this.registeredFolders.has(name)) {
return null;
}
this.registeredFolders.add(name);
const existingFolder = this.folders.get(name);
if (existingFolder) {
src/world/Lighting.tsx
+5
View File
@@ -32,6 +32,11 @@ export function Lighting(): React.JSX.Element {
const folder = debug.createFolder("Lighting");
// null = already registered (StrictMode double-mount), skip adding controls
if (!folder) {
return;
}
folder.add(LIGHTING_STATE, "ambientIntensity", 0, 5, 0.1).name("Ambient");
folder.add(LIGHTING_STATE, "sunIntensity", 0, 8, 0.1).name("Sun Intensity");
folder.add(LIGHTING_STATE, "sunX", -100, 100, 1).name("Sun X");
src/world/Map.tsx
-40
View File
@@ -1,40 +0,0 @@
import { useMemo } from "react";
import { useGLTF } from "@react-three/drei";
import * as THREE from "three";
const MODEL_PATH = "/models/map/blocking/model.glb";
type CenteredModel = {
object: THREE.Object3D;
scale: number;
};
function centerModel(model: THREE.Object3D): number {
model.updateMatrixWorld(true);
const bounds = new THREE.Box3().setFromObject(model);
const center = bounds.getCenter(new THREE.Vector3());
const size = bounds.getSize(new THREE.Vector3());
model.position.set(-center.x, -bounds.min.y, -center.z);
return size.length() > 0 && size.length() < 10 ? 5 : 1;
}
export function Map(): React.JSX.Element {
const { scene } = useGLTF(MODEL_PATH);
const centeredModel = useMemo<CenteredModel>(() => {
const object = scene.clone(true);
const scale = centerModel(object);
return { object, scale };
}, [scene]);
return (
<group scale={centeredModel.scale}>
<primitive object={centeredModel.object} />
</group>
);
}
useGLTF.preload(MODEL_PATH);
src/world/World.tsx
+2 -6
View File
@@ -1,10 +1,8 @@
import { Suspense } from "react";
import { useCameraMode } from "@/hooks/debug/useCameraMode";
import { DebugCameraControls } from "@/utils/debug/scene/DebugCameraControls";
import { DebugHelpers } from "@/utils/debug/scene/DebugHelpers";
import { Environment } from "@/world/Environment";
import { Lighting } from "@/world/Lighting";
import { Map } from "@/world/Map";
import { PlayerComponent } from "@/world/player/PlayerComponent";
export function World(): React.JSX.Element {
@@ -15,10 +13,8 @@ export function World(): React.JSX.Element {
<Environment />
<Lighting />
<DebugHelpers />
{cameraMode === "debug" ? <DebugCameraControls /> : <PlayerComponent />}
<Suspense fallback={null}>
<Map />
</Suspense>
{cameraMode === "debug" ? <DebugCameraControls /> : null}
{cameraMode === "debug" ? null : <PlayerComponent />}
</>
);
}
src/world/player/PlayerCamera.tsx
+1 -12
View File
@@ -1,25 +1,14 @@
import { useEffect } from "react";
import { PointerLockControls } from "@react-three/drei";
import { useThree } from "@react-three/fiber";
import * as THREE from "three";
export const PLAYER_EYE_HEIGHT = 1.75;
const PLAYER_SPAWN_POSITION = new THREE.Vector3(0, PLAYER_EYE_HEIGHT, 6);
const PLAYER_LOOK_AT = new THREE.Vector3(0, PLAYER_EYE_HEIGHT, 0);
export function PlayerCamera(): React.JSX.Element {
const camera = useThree((state) => state.camera);
useEffect(() => {
camera.position.copy(PLAYER_SPAWN_POSITION);
camera.lookAt(PLAYER_LOOK_AT);
camera.updateProjectionMatrix();
return () => {
document.exitPointerLock?.();
};
}, [camera]);
}, []);
return <PointerLockControls />;
}
src/world/player/PlayerComponent.tsx
+11 -1
View File
@@ -1,7 +1,17 @@
import { PlayerCamera } from "@/world/player/PlayerCamera";
import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import { PlayerCamera, PLAYER_EYE_HEIGHT } from "@/world/player/PlayerCamera";
import { PlayerController } from "@/world/player/PlayerController";
const SPAWN_POSITION = { x: 0, y: PLAYER_EYE_HEIGHT, z: 0 };
export function PlayerComponent(): React.JSX.Element {
const camera = useThree((state) => state.camera);
useEffect(() => {
camera.position.set(SPAWN_POSITION.x, SPAWN_POSITION.y, SPAWN_POSITION.z);
}, [camera]);
return (
<>
<PlayerCamera />
src/world/player/PlayerController.tsx
+32 -44
View File
@@ -3,30 +3,32 @@ import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import { PLAYER_EYE_HEIGHT } from "@/world/player/PlayerCamera";
const JUMP_HEIGHT = 1;
const GRAVITY = 18;
const JUMP_VELOCITY = Math.sqrt(2 * GRAVITY * JUMP_HEIGHT);
const MOVE_SPEED = 5;
const GRAVITY = -20;
const JUMP_VELOCITY = 7;
const FLOOR_Y = 0;
type PlayerKeys = {
type Keys = {
forward: boolean;
backward: boolean;
left: boolean;
right: boolean;
jump: boolean;
};
const DEFAULT_KEYS: PlayerKeys = {
const DEFAULT_KEYS: Keys = {
forward: false,
backward: false,
left: false,
right: false,
jump: false,
};
export function PlayerController(): null {
const camera = useThree((state) => state.camera);
const keys = useRef<PlayerKeys>({ ...DEFAULT_KEYS });
const interact = useRef<() => void>(() => {});
const verticalVelocity = useRef(0);
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());
@@ -49,15 +51,8 @@ export function PlayerController(): null {
case "d":
keys.current.right = pressed;
break;
case "e":
if (pressed) {
interact.current();
}
break;
case " ":
if (pressed && camera.position.y <= PLAYER_EYE_HEIGHT) {
verticalVelocity.current = JUMP_VELOCITY;
}
if (pressed) keys.current.jump = true;
break;
default:
return;
@@ -77,15 +72,13 @@ export function PlayerController(): null {
window.removeEventListener("keyup", handleKeyUp);
keys.current = { ...DEFAULT_KEYS };
};
}, [camera]);
}, []);
useFrame((_, delta) => {
const currentForward = forward.current;
const currentRight = right.current;
const currentMovement = movement.current;
currentMovement.set(0, 0, 0);
camera.getWorldDirection(currentForward);
currentForward.setY(0);
@@ -94,40 +87,35 @@ export function PlayerController(): null {
currentRight.crossVectors(currentForward, up.current).normalize();
}
if (keys.current.forward) {
currentMovement.add(currentForward);
}
currentMovement.set(0, 0, 0);
if (keys.current.backward) {
currentMovement.sub(currentForward);
}
if (keys.current.left) {
currentMovement.sub(currentRight);
}
if (keys.current.right) {
currentMovement.add(currentRight);
}
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);
if (currentMovement.lengthSq() > 0) {
currentMovement.normalize().multiplyScalar(MOVE_SPEED * delta);
camera.position.add(currentMovement);
}
verticalVelocity.current -= GRAVITY * delta;
const groundY = FLOOR_Y + PLAYER_EYE_HEIGHT;
isGrounded.current = camera.position.y <= groundY + 0.01;
const nextY = camera.position.y + verticalVelocity.current * delta;
camera.position.set(camera.position.x, nextY, camera.position.z);
if (camera.position.y < PLAYER_EYE_HEIGHT) {
verticalVelocity.current = 0;
camera.position.set(
camera.position.x,
PLAYER_EYE_HEIGHT,
camera.position.z,
);
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),
);
});
return null;