refactor: clean architecture and remove unused code

src/components/three/gameplay/RepairCaseModel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useGLTF } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
 import gsap from "gsap";
@@ -15,14 +15,13 @@ import {
   REPAIR_CASE_ROTATION_AMPLITUDE_DEGREES,
   REPAIR_CASE_ROTATION_RESET_SPEED,
 } from "@/data/gameplay/repairCaseConfig";
-import type { Vector3Tuple } from "@/types/three/three";
+import { useClonedObject } from "@/hooks/three/useClonedObject";
+import type { ModelTransformProps } from "@/types/three/three";
+import { toVector3Scale } from "@/utils/three/scale";
 
-interface RepairCaseModelProps {
+interface RepairCaseModelProps extends ModelTransformProps {
   modelPath: string;
   open: boolean;
-  position?: Vector3Tuple;
-  rotation?: Vector3Tuple;
-  scale?: number | Vector3Tuple;
 }
 
 const CASE_CLOSED_ROTATION_OFFSET_Z = THREE.MathUtils.degToRad(
@@ -44,7 +43,7 @@ export function RepairCaseModel({
 }: RepairCaseModelProps): React.JSX.Element {
   const camera = useThree((state) => state.camera);
   const { scene } = useGLTF(modelPath);
-  const model = useMemo(() => scene.clone(true), [scene]);
+  const model = useClonedObject(scene);
   const groupRef = useRef<THREE.Group>(null);
   const lidRef = useRef<THREE.Object3D | null>(null);
   const worldPosition = useRef(new THREE.Vector3());
@@ -53,8 +52,7 @@ export function RepairCaseModel({
   const phase = useRef({ x: 0, y: 0, z: 0 });
   const initialOpen = useRef(open);
   const openedRotationZ = useRef(0);
-  const parsedScale =
-    typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
+  const parsedScale = toVector3Scale(scale);
 
   useEffect(() => {
     phase.current = {

src/components/three/interaction/TriggerObject.tsx

@@ -1,7 +1,8 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useGLTF } from "@react-three/drei";
 import { RigidBody } from "@react-three/rapier";
 import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { useClonedObject } from "@/hooks/three/useClonedObject";
 import {
   TRIGGER_DEFAULT_COLLIDERS,
   TRIGGER_DEFAULT_LABEL,
@@ -38,7 +39,7 @@ function SpawnedModelInstance({
   position: Vector3Tuple;
 }): React.JSX.Element {
   const { scene } = useGLTF(path);
-  const model = useMemo(() => scene.clone(true), [scene]);
+  const model = useClonedObject(scene);
 
   return <primitive object={model} position={position} />;
 }

src/components/three/models/ExplodableModel.tsx

@@ -2,12 +2,14 @@ import type { ReactNode } from "react";
 import { Component, useEffect, useMemo } from "react";
 import { useFrame } from "@react-three/fiber";
 import { useGLTF } from "@react-three/drei";
+import { useClonedObject } from "@/hooks/three/useClonedObject";
 import { ExplodedModel } from "@/utils/three/ExplodedModel";
-import type { Vector3Tuple } from "@/types/three/three";
+import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
+import { toVector3Scale } from "@/utils/three/scale";
 
 interface ModelErrorBoundaryProps {
   children: ReactNode;
-  fallback?: ReactNode;
+  position?: Vector3Tuple | undefined;
 }
 
 interface ModelErrorBoundaryState {
@@ -32,17 +34,17 @@ class ModelErrorBoundary extends Component<
   }
 
   render(): ReactNode {
-    if (this.state.hasError) return this.props.fallback ?? null;
+    if (this.state.hasError) {
+      return <MissingModelFallback position={this.props.position} />;
+    }
+
     return this.props.children;
   }
 }
 
-interface ExplodableModelInnerProps {
+interface ExplodableModelInnerProps extends ModelTransformProps {
   modelPath: string;
   split: boolean;
-  position?: Vector3Tuple;
-  rotation?: Vector3Tuple;
-  scale?: number | Vector3Tuple;
   splitDistance?: number;
 }
 
@@ -50,10 +52,7 @@ export function ExplodableModel(
   props: ExplodableModelInnerProps,
 ): React.JSX.Element {
   return (
-    <ModelErrorBoundary
-      key={props.modelPath}
-      fallback={<MissingModelFallback position={props.position ?? [0, 0, 0]} />}
-    >
+    <ModelErrorBoundary key={props.modelPath} position={props.position}>
       <ExplodableModelInner {...props} />
     </ModelErrorBoundary>
   );
@@ -68,13 +67,12 @@ function ExplodableModelInner({
   splitDistance = 1.2,
 }: ExplodableModelInnerProps): React.JSX.Element {
   const { scene } = useGLTF(modelPath);
-  const model = useMemo(() => scene.clone(true), [scene]);
+  const model = useClonedObject(scene);
   const explodedModel = useMemo(
     () => new ExplodedModel(model, { distance: splitDistance }),
     [model, splitDistance],
   );
-  const parsedScale =
-    typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
+  const parsedScale = toVector3Scale(scale);
 
   useEffect(() => {
     explodedModel.setSplit(split);
@@ -94,7 +92,7 @@ function ExplodableModelInner({
 function MissingModelFallback({
   position = [0, 0, 0],
 }: {
-  position?: Vector3Tuple;
+  position?: Vector3Tuple | undefined;
 }): React.JSX.Element {
   return (
     <mesh position={position}>

src/components/three/world/SkyModel.tsx

@@ -1,7 +1,8 @@
 import { useFrame, useThree } from "@react-three/fiber";
 import { useGLTF } from "@react-three/drei";
-import { useMemo, useRef } from "react";
+import { useRef } from "react";
 import * as THREE from "three";
+import { useClonedObject } from "@/hooks/three/useClonedObject";
 
 interface SkyModelProps {
   modelPath: string;
@@ -13,7 +14,7 @@ export function SkyModel({ modelPath }: SkyModelProps): React.JSX.Element {
   const camera = useThree((state) => state.camera);
   const groupRef = useRef<THREE.Group>(null);
   const { scene } = useGLTF(modelPath);
-  const model = useMemo(() => scene.clone(true), [scene]);
+  const model = useClonedObject(scene);
 
   useFrame(() => {
     groupRef.current?.position.copy(camera.position);