feat(map): add terrain boundary collision

src/data/world/terrainBoundaryConfig.ts

@@ -0,0 +1,10 @@
+import type { Vector3Tuple } from "@/types/three/three";
+
+export const TERRAIN_BOUNDARY_CONFIG = {
+  enabled: true,
+  center: [-10, 8, -2] as Vector3Tuple,
+  radius: 135,
+  height: 28,
+  thickness: 3,
+  segments: 48,
+};

src/world/GameMapCollision.tsx

@@ -11,6 +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 type { MapNode } from "@/types/editor/editor";
 import type { OctreeReadyHandler } from "@/types/three/three";
 import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
@@ -173,6 +174,7 @@ export function GameMapCollision({
 
   return (
     <group ref={groupRef} visible={false}>
+      {mapReady ? <TerrainBoundaryCollision /> : null}
       {mapReady
         ? collisionNodes.map((mapNode, index) => (
             <CollisionErrorBoundary

src/world/collision/TerrainBoundaryCollision.tsx

@@ -0,0 +1,36 @@
+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()}</>;
+}