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

update

Browse Source
This commit is contained in:
math-pixel
2026-05-11 08:56:54 +02:00
parent 17836ec889
commit e8fb859f79
208 changed files with 809 additions and 10897 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/world/Environment.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { Environment as DreiEnvironment } from "@react-three/drei";
import {
GAME_SCENE_SKYBOX_PATH,
PHYSICS_SCENE_BACKGROUND_COLOR,
} from "@/data/world/environmentConfig";
} from "@/data/environmentConfig";
import { useSceneMode } from "@/hooks/debug/useSceneMode";
export function Environment(): React.JSX.Element {
src/world/GameMap.tsx
-128
View File
@@ -1,128 +0,0 @@
import type { ReactNode } from "react";
import { Component } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { useGLTF } from "@react-three/drei";
import * as THREE from "three";
import { useOctreeGraphNode } from "@/hooks/useOctreeGraphNode";
import { loadMapSceneData } from "@/utils/loadMapSceneData";
import type { OctreeReadyHandler } from "@/types/three";
import type { MapNode } from "@/types/editor";
interface ErrorBoundaryProps {
children: ReactNode;
fallback?: ReactNode;
}
interface ErrorBoundaryState {
hasError: boolean;
}
class ModelErrorBoundary extends Component<
ErrorBoundaryProps,
ErrorBoundaryState
> {
constructor(props: ErrorBoundaryProps) {
super(props);
this.state = { hasError: false };
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
static getDerivedStateFromError(_error: Error): ErrorBoundaryState {
return { hasError: true };
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
componentDidCatch(_error: Error): void {
console.warn(`Failed to load model`);
}
render(): ReactNode {
if (this.state.hasError) {
return this.props.fallback ?? null;
}
return this.props.children;
}
}
interface GameMapProps {
onOctreeReady: OctreeReadyHandler;
}
export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
const [mapNodes, setMapNodes] = useState<MapNode[]>([]);
const [isLoading, setIsLoading] = useState(true);
const groupRef = useRef<THREE.Group>(null);
useOctreeGraphNode(groupRef, onOctreeReady, mapNodes.length);
useEffect(() => {
const loadMap = async () => {
try {
const sceneData = await loadMapSceneData();
if (!sceneData) {
console.warn("map.json not found");
setIsLoading(false);
return;
}
const loadedMapNodes = sceneData.mapNodes.filter((node) =>
sceneData.models.has(node.name),
);
const missingModelCount =
sceneData.mapNodes.length - loadedMapNodes.length;
if (missingModelCount > 0) {
console.warn(
`${missingModelCount} map nodes were skipped because their model files are missing.`,
);
}
setMapNodes(loadedMapNodes);
} catch (error) {
console.error("Error loading map:", error);
} finally {
setIsLoading(false);
}
};
loadMap();
}, []);
return (
<group ref={groupRef}>
{!isLoading &&
mapNodes.map((node, index) => (
<ModelErrorBoundary key={index}>
<ModelInstance node={node} />
</ModelErrorBoundary>
))}
</group>
);
}
function ModelInstance({ node }: { node: MapNode }): React.JSX.Element | null {
const modelPath = `/models/${node.name}/model.gltf`;
const groupRef = useRef<THREE.Group>(null);
const { scene } = useGLTF(modelPath);
const sceneInstance = useMemo(() => scene.clone(true), [scene]);
const { position, rotation, scale } = node;
useEffect(() => {
if (groupRef.current) {
groupRef.current.position.set(...position);
groupRef.current.rotation.set(...rotation);
groupRef.current.scale.set(...scale);
}
}, [position, rotation, scale]);
return (
<primitive
ref={groupRef}
object={sceneInstance}
position={position}
rotation={rotation}
scale={scale}
/>
);
}
src/world/Lighting.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ import {
SUN_Z_MAX,
SUN_Z_MIN,
SUN_Z_STEP,
} from "@/data/world/lightingConfig";
} from "@/data/lightingConfig";
import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
type LightingState = {
src/world/Map.tsx
+55
View File
@@ -0,0 +1,55 @@
import { useEffect, useRef } from "react";
import { useThree } from "@react-three/fiber";
import { useGLTF } from "@react-three/drei";
import * as THREE from "three";
import { MAP_DEBUG_BOX_HELPER_COLOR } from "@/data/debugConfig";
import { useOctreeGraphNode } from "@/hooks/useOctreeGraphNode";
import type { OctreeReadyHandler } from "@/types/3d";
import { Debug } from "@/utils/debug/Debug";
const MAP_PATH = "/models/map/model.gltf";
interface MapProps {
onOctreeReady: OctreeReadyHandler;
}
export function Map({ onOctreeReady }: MapProps): React.JSX.Element {
const { scene: gltfScene } = useGLTF(MAP_PATH);
const groupRef = useRef<THREE.Group>(null);
const boxHelpersRef = useRef<THREE.BoxHelper[]>([]);
const { scene } = useThree();
useOctreeGraphNode(groupRef, onOctreeReady);
useEffect(() => {
const debug = Debug.getInstance();
if (!debug.active || !groupRef.current) return;
const helpers: THREE.BoxHelper[] = [];
groupRef.current.traverse((child) => {
if (!(child instanceof THREE.Mesh)) return;
const helper = new THREE.BoxHelper(child, MAP_DEBUG_BOX_HELPER_COLOR);
scene.add(helper);
helpers.push(helper);
});
boxHelpersRef.current = helpers;
return () => {
helpers.forEach((h) => {
scene.remove(h);
h.dispose();
});
boxHelpersRef.current = [];
};
}, [scene]);
return (
<group ref={groupRef}>
<primitive object={gltfScene} />
</group>
);
}
useGLTF.preload(MAP_PATH);
src/world/World.tsx
+7 -7
View File
@@ -3,15 +3,15 @@ import type { Octree } from "three/addons/math/Octree.js";
import {
PLAYER_SPAWN_POSITION_GAME,
PLAYER_SPAWN_POSITION_PHYSICS,
} from "@/data/player/playerConfig";
} from "@/data/playerConfig";
import { useCameraMode } from "@/hooks/debug/useCameraMode";
import { useSceneMode } from "@/hooks/debug/useSceneMode";
import { DebugCameraControls } from "@/components/debug/scene/DebugCameraControls";
import { DebugHelpers } from "@/components/debug/scene/DebugHelpers";
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 { GameMap } from "@/world/GameMap";
import { Player } from "@/world/player/Player";
import { Map } from "@/world/Map";
import { PlayerComponent } from "@/world/player/PlayerComponent";
import { TestScene } from "@/world/debug/TestScene";
export function World(): React.JSX.Element {
@@ -31,13 +31,13 @@ export function World(): React.JSX.Element {
{cameraMode === "debug" ? <DebugCameraControls /> : null}
{sceneMode === "game" ? (
<GameMap onOctreeReady={setOctree} />
<Map onOctreeReady={setOctree} />
) : (
<TestScene onOctreeReady={setOctree} />
)}
{cameraMode !== "debug" ? (
<Player octree={octree} spawnPosition={playerSpawnPosition} />
<PlayerComponent octree={octree} spawnPosition={playerSpawnPosition} />
) : null}
</>
);
src/world/debug/TestScene.tsx
+5 -13
View File
@@ -1,9 +1,8 @@
import { useRef } from "react";
import * as THREE from "three";
import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier";
import { GrabbableObject } from "@/components/three/GrabbableObject";
import { TriggerObject } from "@/components/three/TriggerObject";
import { AnimatedModel } from "@/components/three/AnimatedModel";
import * as THREE from "three";
import { GrabbableObject } from "@/components/3d/GrabbableObject";
import { TriggerObject } from "@/components/3d/TriggerObject";
import {
TEST_SCENE_FLOOR_COLLIDER_HALF_EXTENTS,
TEST_SCENE_FLOOR_POSITION,
@@ -20,9 +19,9 @@ import {
TEST_SCENE_TRIGGER_ROUGHNESS,
TEST_SCENE_TRIGGER_SEGMENTS,
TEST_SCENE_TRIGGER_SOUND_PATH,
} from "@/data/debug/testSceneConfig";
} from "@/data/testSceneConfig";
import { useOctreeGraphNode } from "@/hooks/useOctreeGraphNode";
import type { OctreeReadyHandler } from "@/types/three";
import type { OctreeReadyHandler } from "@/types/3d";
interface TestSceneProps {
onOctreeReady: OctreeReadyHandler;
@@ -86,13 +85,6 @@ export function TestScene({
</mesh>
</TriggerObject>
</Physics>
<AnimatedModel
modelPath="/models/elec/model.gltf"
defaultAnimation="Idle"
position={[0, 0, -5]}
scale={1}
/>
</>
);
}
src/world/player/Player.tsx → src/world/player/PlayerComponent.tsx
+4 -4
View File
@@ -1,19 +1,19 @@
import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import type { Octree } from "three/addons/math/Octree.js";
import type { Vector3Tuple } from "@/types/three";
import type { Vector3Tuple } from "@/types/3d";
import { PlayerCamera } from "@/world/player/PlayerCamera";
import { PlayerController } from "@/world/player/PlayerController";
interface PlayerProps {
interface PlayerComponentProps {
octree: Octree | null;
spawnPosition: Vector3Tuple;
}
export function Player({
export function PlayerComponent({
spawnPosition,
octree,
}: PlayerProps): React.JSX.Element {
}: PlayerComponentProps): React.JSX.Element {
const camera = useThree((state) => state.camera);
useEffect(() => {
src/world/player/PlayerController.tsx
+44 -41
View File
@@ -11,7 +11,7 @@ import {
MOVE_LEFT_KEY,
MOVE_RIGHT_KEY,
PRIMARY_INTERACT_MOUSE_BUTTON,
} from "@/data/input/keybindings";
} from "@/data/keybindings";
import {
PLAYER_ACCELERATION_MULTIPLIER,
PLAYER_AIR_CONTROL_FACTOR,
@@ -22,9 +22,9 @@ import {
PLAYER_MAX_DELTA,
PLAYER_WALK_SPEED,
PLAYER_XZ_DAMPING_FACTOR,
} from "@/data/player/playerConfig";
import { InteractionManager } from "@/managers/InteractionManager";
import type { Vector3Tuple } from "@/types/three";
} from "@/data/playerConfig";
import { InteractionManager } from "@/stateManager/InteractionManager";
import type { Vector3Tuple } from "@/types/3d";
type Keys = {
forward: boolean;
@@ -54,25 +54,6 @@ const _up = new THREE.Vector3(0, 1, 0);
const _translateVec = new THREE.Vector3();
const _collisionCorrection = new THREE.Vector3();
function setMovementKey(keys: Keys, key: string, pressed: boolean): boolean {
switch (key.toLowerCase()) {
case MOVE_FORWARD_KEY:
keys.forward = pressed;
return true;
case MOVE_BACKWARD_KEY:
keys.backward = pressed;
return true;
case MOVE_LEFT_KEY:
keys.left = pressed;
return true;
case MOVE_RIGHT_KEY:
keys.right = pressed;
return true;
default:
return false;
}
}
export function PlayerController({
octree,
spawnPosition,
@@ -108,29 +89,51 @@ export function PlayerController({
const interaction = InteractionManager.getInstance();
const handleKeyDown = (event: KeyboardEvent): void => {
if (setMovementKey(keys.current, event.key, true)) {
event.preventDefault();
return;
}
if (event.key === JUMP_KEY) {
wantsJump.current = true;
event.preventDefault();
return;
}
if (event.key.toLowerCase() === INTERACT_KEY) {
if (interaction.getState().focused?.kind === "trigger") {
interaction.pressInteract();
}
event.preventDefault();
switch (event.key.toLowerCase()) {
case MOVE_FORWARD_KEY:
keys.current.forward = true;
break;
case MOVE_BACKWARD_KEY:
keys.current.backward = true;
break;
case MOVE_LEFT_KEY:
keys.current.left = true;
break;
case MOVE_RIGHT_KEY:
keys.current.right = true;
break;
case JUMP_KEY:
wantsJump.current = true;
break;
case INTERACT_KEY:
if (interaction.getState().focused?.kind === "trigger") {
interaction.pressInteract();
}
break;
default:
return;
}
event.preventDefault();
};
const handleKeyUp = (event: KeyboardEvent): void => {
if (setMovementKey(keys.current, event.key, false)) {
event.preventDefault();
switch (event.key.toLowerCase()) {
case MOVE_FORWARD_KEY:
keys.current.forward = false;
break;
case MOVE_BACKWARD_KEY:
keys.current.backward = false;
break;
case MOVE_LEFT_KEY:
keys.current.left = false;
break;
case MOVE_RIGHT_KEY:
keys.current.right = false;
break;
default:
return;
}
event.preventDefault();
};
const handleMouseDown = (event: MouseEvent): void => {