feat: add the map

src/world/Environment.tsx

@@ -1 +1,3 @@
-// src/world/Environment.tsx
+export function Environment(): React.JSX.Element {
+  return <color attach="background" args={["#0b1018"]} />;
+}

src/world/Lighting.tsx

@@ -1 +1,12 @@
-// src/world/Lighting.tsx
+export function Lighting(): React.JSX.Element {
+  return (
+    <>
+      <directionalLight
+        position={[60, 80, 30]}
+        intensity={2.8}
+        color="#fff7ed"
+        castShadow
+      />
+    </>
+  );
+}

src/world/Map.tsx

@@ -1 +1,101 @@
-// src/world/Map.tsx
+// # route path src/world/Map.tsx
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useGLTF } from "@react-three/drei";
+import * as THREE from "three";
+import { Debug } from "@/debug/Debug";
+
+const MODEL_PATH = "/models/map/blocking/model.glb";
+
+type MapDebugState = {
+  positionX: number;
+  positionY: number;
+  positionZ: number;
+  rotationY: number;
+  scale: number;
+};
+
+const DEFAULT_DEBUG_STATE: MapDebugState = {
+  positionX: 0,
+  positionY: 0,
+  positionZ: 0,
+  rotationY: 0,
+  scale: 1,
+};
+
+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 root = useRef<THREE.Group>(null);
+  const debugState = useRef<MapDebugState>({ ...DEFAULT_DEBUG_STATE });
+  const { scene } = useGLTF(MODEL_PATH);
+  const model = useMemo(() => scene.clone(true), [scene]);
+
+  useLayoutEffect(() => {
+    debugState.current.scale = centerModel(model);
+  }, [model]);
+
+  useEffect(() => {
+    const debug = Debug.getInstance();
+
+    if (!debug.active) {
+      return undefined;
+    }
+
+    const folder = debug.createFolder("Map");
+
+    if (!folder) {
+      return undefined;
+    }
+
+    folder
+      .add(debugState.current, "positionX", -100, 100, 0.1)
+      .name("Position X");
+    folder
+      .add(debugState.current, "positionY", -20, 50, 0.1)
+      .name("Position Y");
+    folder
+      .add(debugState.current, "positionZ", -100, 100, 0.1)
+      .name("Position Z");
+    folder
+      .add(debugState.current, "rotationY", -Math.PI, Math.PI, 0.01)
+      .name("Rotation Y");
+    folder.add(debugState.current, "scale", 0.1, 10, 0.01).name("Scale");
+
+    return undefined;
+  }, []);
+
+  useFrame(() => {
+    const currentRoot = root.current;
+
+    if (!currentRoot) {
+      return;
+    }
+
+    currentRoot.position.set(
+      debugState.current.positionX,
+      debugState.current.positionY,
+      debugState.current.positionZ,
+    );
+    currentRoot.rotation.y = debugState.current.rotationY;
+    currentRoot.scale.setScalar(debugState.current.scale);
+  });
+
+  return (
+    <group ref={root}>
+      <primitive object={model} />
+    </group>
+  );
+}
+
+useGLTF.preload(MODEL_PATH);

src/world/World.tsx

@@ -0,0 +1,20 @@
+import { Suspense } from "react";
+import { DebugCameraControls } from "@/debug/scene/DebugCameraControls";
+import { DebugHelpers } from "@/debug/scene/DebugHelpers";
+import { Environment } from "@/world/Environment";
+import { Lighting } from "@/world/Lighting";
+import { Map } from "@/world/Map";
+
+export function World(): React.JSX.Element {
+  return (
+    <>
+      <Environment />
+      <Lighting />
+      <DebugHelpers />
+      <DebugCameraControls />
+      <Suspense fallback={null}>
+        <Map />
+      </Suspense>
+    </>
+  );
+}