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

fix(map): add world plane collision and respawn

Browse Source
This commit is contained in:
Tom Boullay
2026-05-26 23:52:12 +02:00
parent 0696ca2ae3
commit 665d9f9702
13 changed files with 159 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/world/GameMap.tsx
+2
View File
@@ -26,6 +26,7 @@ import { MapInstancingSystem } from "@/world/map-instancing/MapInstancingSystem"
import { isInstancedMapNodeName } from "@/world/map-instancing/mapInstancingConfig";
import { VegetationSystem } from "@/world/vegetation/VegetationSystem";
import { WaterSystem } from "@/world/water/WaterSystem";
import { WorldPlane } from "@/world/WorldPlane";
import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
import { logger } from "@/utils/core/Logger";
import { loadMapSceneData } from "@/utils/map/loadMapSceneData";
@@ -258,6 +259,7 @@ export function GameMap({
))}
</group>
<MapInstancingSystem />
<WorldPlane />
<WaterSystem />
<VegetationSystem />
{isMapModelVisible("terrain", { groups, models }) ? (
src/world/GameMapCollision.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ import * as THREE from "three";
import { useClonedObject } from "@/hooks/three/useClonedObject";
import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
import { useOctreeGraphNode } from "@/hooks/three/useOctreeGraphNode";
import { TerrainBoundaryCollision } from "@/world/collision/TerrainBoundaryCollision";
import { WorldBoundsCollision } from "@/world/collision/WorldBoundsCollision";
import type { MapNode } from "@/types/editor/editor";
import type { OctreeReadyHandler } from "@/types/three/three";
import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
@@ -174,7 +174,7 @@ export function GameMapCollision({
return (
<group ref={groupRef} visible={false}>
{mapReady ? <TerrainBoundaryCollision /> : null}
{mapReady ? <WorldBoundsCollision /> : null}
{mapReady
? collisionNodes.map((mapNode, index) => (
<CollisionErrorBoundary
src/world/WorldPlane.tsx
+20
View File
@@ -0,0 +1,20 @@
import { WORLD_BOUNDS_CONFIG } from "@/data/world/worldBoundsConfig";
export function WorldPlane(): React.JSX.Element | null {
if (!WORLD_BOUNDS_CONFIG.enabled) {
return null;
}
const { center, planeColor, planeY, size } = WORLD_BOUNDS_CONFIG;
return (
<mesh
name="world-plane"
position={[center[0], planeY, center[2]]}
rotation={[-Math.PI / 2, 0, 0]}
>
<planeGeometry args={size} />
<meshBasicMaterial color={planeColor} />
</mesh>
);
}
src/world/collision/TerrainBoundaryCollision.tsx
-36
View File
@@ -1,36 +0,0 @@
import { TERRAIN_BOUNDARY_CONFIG } from "@/data/world/terrainBoundaryConfig";
function createBoundarySegments(): React.JSX.Element[] {
const segments: React.JSX.Element[] = [];
const {
center,
height,
radius,
segments: segmentCount,
thickness,
} = TERRAIN_BOUNDARY_CONFIG;
const arcLength = (Math.PI * 2 * radius) / segmentCount;
for (let index = 0; index < segmentCount; index++) {
const angle = (index / segmentCount) * Math.PI * 2;
const x = center[0] + Math.cos(angle) * radius;
const z = center[2] + Math.sin(angle) * radius;
segments.push(
<mesh key={index} position={[x, center[1], z]} rotation={[0, -angle, 0]}>
<boxGeometry args={[arcLength, height, thickness]} />
<meshBasicMaterial />
</mesh>,
);
}
return segments;
}
export function TerrainBoundaryCollision(): React.JSX.Element | null {
if (!TERRAIN_BOUNDARY_CONFIG.enabled) {
return null;
}
return <>{createBoundarySegments()}</>;
}
src/world/collision/WorldBoundsCollision.tsx
+11
View File
@@ -0,0 +1,11 @@
import { WorldPlaneCollision } from "@/world/collision/WorldPlaneCollision";
import { WorldWallsCollision } from "@/world/collision/WorldWallsCollision";
export function WorldBoundsCollision(): React.JSX.Element {
return (
<group name="world-bounds-collision">
<WorldPlaneCollision />
<WorldWallsCollision />
</group>
);
}
src/world/collision/WorldPlaneCollision.tsx
+20
View File
@@ -0,0 +1,20 @@
import { WORLD_BOUNDS_CONFIG } from "@/data/world/worldBoundsConfig";
export function WorldPlaneCollision(): React.JSX.Element | null {
if (!WORLD_BOUNDS_CONFIG.enabled) {
return null;
}
const { center, planeCollisionThickness, planeY, size } = WORLD_BOUNDS_CONFIG;
const [width, depth] = size;
return (
<mesh
name="world-plane-collision"
position={[center[0], planeY - planeCollisionThickness / 2, center[2]]}
>
<boxGeometry args={[width, planeCollisionThickness, depth]} />
<meshBasicMaterial />
</mesh>
);
}
src/world/collision/WorldWallsCollision.tsx
+38
View File
@@ -0,0 +1,38 @@
import { WORLD_BOUNDS_CONFIG } from "@/data/world/worldBoundsConfig";
export function WorldWallsCollision(): React.JSX.Element | null {
if (!WORLD_BOUNDS_CONFIG.enabled) {
return null;
}
const { center, size, wallHeight, wallThickness } = WORLD_BOUNDS_CONFIG;
const [width, depth] = size;
const wallY = center[1] + wallHeight / 2;
const halfWidth = width / 2;
const halfDepth = depth / 2;
return (
<group name="world-walls-collision">
<mesh position={[center[0], wallY, center[2] - halfDepth]}>
<boxGeometry
args={[width + wallThickness * 2, wallHeight, wallThickness]}
/>
<meshBasicMaterial />
</mesh>
<mesh position={[center[0], wallY, center[2] + halfDepth]}>
<boxGeometry
args={[width + wallThickness * 2, wallHeight, wallThickness]}
/>
<meshBasicMaterial />
</mesh>
<mesh position={[center[0] - halfWidth, wallY, center[2]]}>
<boxGeometry args={[wallThickness, wallHeight, depth]} />
<meshBasicMaterial />
</mesh>
<mesh position={[center[0] + halfWidth, wallY, center[2]]}>
<boxGeometry args={[wallThickness, wallHeight, depth]} />
<meshBasicMaterial />
</mesh>
</group>
);
}
src/world/player/PlayerController.tsx
+46 -9
View File
@@ -17,6 +17,8 @@ import {
PLAYER_AIR_CONTROL_FACTOR,
PLAYER_CAPSULE_RADIUS,
PLAYER_EYE_HEIGHT,
PLAYER_FALL_RESPAWN_DELAY,
PLAYER_FALL_RESPAWN_Y,
PLAYER_GRAVITY,
PLAYER_JUMP_SPEED,
PLAYER_MAX_DELTA,
@@ -57,6 +59,22 @@ const _up = new THREE.Vector3(0, 1, 0);
const _translateVec = new THREE.Vector3();
const _collisionCorrection = new THREE.Vector3();
function resetPlayerCapsule(
capsule: Capsule,
spawnPosition: Vector3Tuple,
camera: THREE.Camera,
velocity: THREE.Vector3,
): void {
capsule.start.set(
spawnPosition[0],
spawnPosition[1] - PLAYER_EYE_HEIGHT + PLAYER_CAPSULE_RADIUS,
spawnPosition[2],
);
capsule.end.set(...spawnPosition);
velocity.set(0, 0, 0);
camera.position.copy(capsule.end);
}
function createSpawnCapsule(spawnPosition: Vector3Tuple): Capsule {
return new Capsule(
new THREE.Vector3(
@@ -104,6 +122,7 @@ export function PlayerController({
const movementLockedRef = useRef(movementLocked);
const keys = useRef<Keys>({ ...DEFAULT_KEYS });
const velocity = useRef(new THREE.Vector3());
const fallDuration = useRef(0);
const onFloor = useRef(false);
const wantsJump = useRef(false);
const initializedRef = useRef(false);
@@ -112,16 +131,15 @@ export function PlayerController({
const capsule = useRef(createSpawnCapsule(spawnPosition));
useLayoutEffect(() => {
capsule.current.start.set(
spawnPosition[0],
spawnPosition[1] - PLAYER_EYE_HEIGHT + PLAYER_CAPSULE_RADIUS,
spawnPosition[2],
resetPlayerCapsule(
capsule.current,
spawnPosition,
camera,
velocity.current,
);
capsule.current.end.set(...spawnPosition);
velocity.current.set(0, 0, 0);
fallDuration.current = 0;
onFloor.current = false;
wantsJump.current = false;
camera.position.copy(capsule.current.end);
initializedRef.current = true;
}, [camera, spawnPosition]);
@@ -211,6 +229,27 @@ export function PlayerController({
useFrame((_, delta) => {
if (!initializedRef.current) return;
const dt = Math.min(delta, PLAYER_MAX_DELTA);
if (capsule.current.end.y < PLAYER_FALL_RESPAWN_Y) {
fallDuration.current += dt;
if (fallDuration.current >= PLAYER_FALL_RESPAWN_DELAY) {
resetPlayerCapsule(
capsule.current,
spawnPosition,
camera,
velocity.current,
);
fallDuration.current = 0;
onFloor.current = false;
wantsJump.current = false;
return;
}
} else {
fallDuration.current = 0;
}
if (isPlayerInputLocked() || !canMove) {
keys.current = { ...DEFAULT_KEYS };
velocity.current.set(0, 0, 0);
@@ -218,8 +257,6 @@ export function PlayerController({
return;
}
const dt = Math.min(delta, PLAYER_MAX_DELTA);
camera.getWorldDirection(_forward);
_forward.setY(0);
if (_forward.lengthSq() > 0) {