fix(editor): restore stable map editing behavior

src/components/three/models/SimpleModel.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import * as THREE from "three";
+import { useClonedObject } from "@/hooks/three/useClonedObject";
 import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
 import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
 
@@ -41,7 +42,7 @@ export function SimpleModel({
     rotation,
     scale,
   });
-  const model = useMemo(() => scene.clone(true), [scene]);
+  const model = useClonedObject(scene);
 
   useEffect(() => {
     applyShadowSettings(model, castShadow, receiveShadow);

src/components/three/world/SkyModel.tsx

@@ -5,6 +5,7 @@ import * as THREE from "three";
 import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
 
 interface SkyModelProps {
+  fallbackModelPath?: string | undefined;
   modelPath: string;
   fallbackColor?: string | undefined;
   scale?: number | undefined;
@@ -52,12 +53,20 @@ class SkyModelErrorBoundary extends Component<
 
 export function SkyModel({
   fallbackColor,
+  fallbackModelPath,
   modelPath,
   scale = SKY_MODEL_SCALE,
 }: SkyModelProps): React.JSX.Element {
-  const fallback = fallbackColor ? (
+  const colorFallback = fallbackColor ? (
     <color attach="background" args={[fallbackColor]} />
   ) : null;
+  const fallback = fallbackModelPath ? (
+    <SkyModelErrorBoundary key={fallbackModelPath} fallback={colorFallback}>
+      <SkyModelContent modelPath={fallbackModelPath} scale={scale} />
+    </SkyModelErrorBoundary>
+  ) : (
+    colorFallback
+  );
 
   return (
     <SkyModelErrorBoundary key={modelPath} fallback={fallback}>