refactor: clean map gameplay architecture

src/components/three/interaction/InteractableObject.tsx

@@ -41,8 +41,27 @@ type InteractableObjectProps =
 const _cameraPos = new THREE.Vector3();
 const _cameraDir = new THREE.Vector3();
 const _objectPos = new THREE.Vector3();
+const _objectBounds = new THREE.Box3();
 const _raycaster = new THREE.Raycaster();
 
+function getInteractableWorldPosition(
+  group: THREE.Group,
+  debugSphere: THREE.Mesh | null,
+): THREE.Vector3 {
+  _objectBounds.makeEmpty();
+
+  for (const child of group.children) {
+    if (child === debugSphere) continue;
+    _objectBounds.expandByObject(child);
+  }
+
+  if (!_objectBounds.isEmpty()) {
+    return _objectBounds.getCenter(_objectPos);
+  }
+
+  return group.getWorldPosition(_objectPos);
+}
+
 function createInteractableHandle(
   props: InteractableObjectProps,
 ): InteractableHandle {
@@ -158,7 +177,7 @@ export function InteractableObject(
       const t = bodyRef.current.translation();
       _objectPos.set(t.x, t.y, t.z);
     } else if (group) {
-      group.getWorldPosition(_objectPos);
+      getInteractableWorldPosition(group, debugSphereRef.current);
     } else {
       _objectPos.set(...position);
     }

src/components/three/models/SimpleModel.tsx

@@ -2,7 +2,6 @@ import { useEffect, useMemo } from "react";
 import * as THREE from "three";
 import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
 import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
-import { disposeObject3D } from "@/utils/three/dispose";
 
 function applyShadowSettings(
   object: THREE.Object3D,
@@ -48,12 +47,6 @@ export function SimpleModel({
     applyShadowSettings(model, castShadow, receiveShadow);
   }, [castShadow, model, receiveShadow]);
 
-  useEffect(() => {
-    return () => {
-      disposeObject3D(model);
-    };
-  }, [model]);
-
   const parsedScale =
     typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;