Merge branch 'develop' into feat/main-feature

src/world/Environment.tsx

@@ -2,7 +2,7 @@ import { Environment as DreiEnvironment } from "@react-three/drei";
 import {
   GAME_SCENE_SKYBOX_PATH,
   PHYSICS_SCENE_BACKGROUND_COLOR,
-} from "@/data/environmentConfig";
+} from "@/data/world/environmentConfig";
 import { useSceneMode } from "@/hooks/debug/useSceneMode";
 
 export function Environment(): React.JSX.Element {

src/world/GameMap.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useMemo, useState, useRef } 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 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) => (
+          <ModelInstance key={index} node={node} />
+        ))}
+    </group>
+  );
+}
+
+function ModelInstance({ node }: { node: MapNode }): React.JSX.Element {
+  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

@@ -20,7 +20,7 @@ import {
   SUN_Z_MAX,
   SUN_Z_MIN,
   SUN_Z_STEP,
-} from "@/data/lightingConfig";
+} from "@/data/world/lightingConfig";
 import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
 
 type LightingState = {

src/world/Map.tsx

@@ -1,55 +0,0 @@
-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

@@ -3,15 +3,15 @@ import type { Octree } from "three/addons/math/Octree.js";
 import {
   PLAYER_SPAWN_POSITION_GAME,
   PLAYER_SPAWN_POSITION_PHYSICS,
-} from "@/data/playerConfig";
+} from "@/data/player/playerConfig";
 import { useCameraMode } from "@/hooks/debug/useCameraMode";
 import { useSceneMode } from "@/hooks/debug/useSceneMode";
-import { DebugCameraControls } from "@/utils/debug/scene/DebugCameraControls";
-import { DebugHelpers } from "@/utils/debug/scene/DebugHelpers";
+import { DebugCameraControls } from "@/components/debug/scene/DebugCameraControls";
+import { DebugHelpers } from "@/components/debug/scene/DebugHelpers";
 import { Environment } from "@/world/Environment";
 import { Lighting } from "@/world/Lighting";
-import { Map } from "@/world/Map";
-import { PlayerComponent } from "@/world/player/PlayerComponent";
+import { GameMap } from "@/world/GameMap";
+import { Player } from "@/world/player/Player";
 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" ? (
-        <Map onOctreeReady={setOctree} />
+        <GameMap onOctreeReady={setOctree} />
       ) : (
         <TestScene onOctreeReady={setOctree} />
       )}
 
       {cameraMode !== "debug" ? (
-        <PlayerComponent octree={octree} spawnPosition={playerSpawnPosition} />
+        <Player octree={octree} spawnPosition={playerSpawnPosition} />
       ) : null}
     </>
   );

src/world/debug/TestScene.tsx

@@ -1,8 +1,8 @@
 import { useRef } from "react";
 import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier";
 import * as THREE from "three";
-import { GrabbableObject } from "@/components/3d/GrabbableObject";
-import { TriggerObject } from "@/components/3d/TriggerObject";
+import { GrabbableObject } from "@/components/three/GrabbableObject";
+import { TriggerObject } from "@/components/three/TriggerObject";
 import {
   TEST_SCENE_FLOOR_COLLIDER_HALF_EXTENTS,
   TEST_SCENE_FLOOR_POSITION,
@@ -19,9 +19,9 @@ import {
   TEST_SCENE_TRIGGER_ROUGHNESS,
   TEST_SCENE_TRIGGER_SEGMENTS,
   TEST_SCENE_TRIGGER_SOUND_PATH,
-} from "@/data/testSceneConfig";
+} from "@/data/debug/testSceneConfig";
 import { useOctreeGraphNode } from "@/hooks/useOctreeGraphNode";
-import type { OctreeReadyHandler } from "@/types/3d";
+import type { OctreeReadyHandler } from "@/types/three";
 
 interface TestSceneProps {
   onOctreeReady: OctreeReadyHandler;

src/world/player/Player.tsx

@@ -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/3d";
+import type { Vector3Tuple } from "@/types/three";
 import { PlayerCamera } from "@/world/player/PlayerCamera";
 import { PlayerController } from "@/world/player/PlayerController";
 
-interface PlayerComponentProps {
+interface PlayerProps {
   octree: Octree | null;
   spawnPosition: Vector3Tuple;
 }
 
-export function PlayerComponent({
+export function Player({
   spawnPosition,
   octree,
-}: PlayerComponentProps): React.JSX.Element {
+}: PlayerProps): React.JSX.Element {
   const camera = useThree((state) => state.camera);
 
   useEffect(() => {

src/world/player/PlayerController.tsx

@@ -11,7 +11,7 @@ import {
   MOVE_LEFT_KEY,
   MOVE_RIGHT_KEY,
   PRIMARY_INTERACT_MOUSE_BUTTON,
-} from "@/data/keybindings";
+} from "@/data/input/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/playerConfig";
-import { InteractionManager } from "@/stateManager/InteractionManager";
-import type { Vector3Tuple } from "@/types/3d";
+} from "@/data/player/playerConfig";
+import { InteractionManager } from "@/managers/InteractionManager";
+import type { Vector3Tuple } from "@/types/three";
 
 type Keys = {
   forward: boolean;
@@ -54,6 +54,25 @@ 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,
@@ -89,51 +108,29 @@ export function PlayerController({
     const interaction = InteractionManager.getInstance();
 
     const handleKeyDown = (event: KeyboardEvent): void => {
-      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;
+      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();
       }
-      event.preventDefault();
     };
 
     const handleKeyUp = (event: KeyboardEvent): void => {
-      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;
+      if (setMovementKey(keys.current, event.key, false)) {
+        event.preventDefault();
       }
-      event.preventDefault();
     };
 
     const handleMouseDown = (event: MouseEvent): void => {