src/components/three/world/SkyModel.tsx

@@ -1,6 +1,6 @@
 import { useFrame, useThree } from "@react-three/fiber";
 import { useGLTF } from "@react-three/drei";
-import { Component, useMemo, useRef, type ReactNode } from "react";
+import { Component, useEffect, useMemo, useRef, type ReactNode } from "react";
 import * as THREE from "three";
 import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
 
@@ -80,6 +80,12 @@ function SkyModelContent({
   });
   const model = useMemo(() => createSkyModel(scene), [scene]);
 
+  useEffect(() => {
+    return () => {
+      disposeSkyModelMaterials(model);
+    };
+  }, [model]);
+
   useFrame(() => {
     groupRef.current?.position.copy(camera.position);
   });
@@ -122,5 +128,20 @@ function createSkyMaterial<T extends THREE.Material>(material: T): T {
   return skyMaterial as T;
 }
 
+function disposeSkyModelMaterials(model: THREE.Object3D): void {
+  model.traverse((object) => {
+    if (!(object instanceof THREE.Mesh)) return;
+
+    if (Array.isArray(object.material)) {
+      for (const material of object.material) {
+        material.dispose();
+      }
+      return;
+    }
+
+    object.material.dispose();
+  });
+}
+
 useGLTF.preload("/models/skybox/skybox.gltf");
 useGLTF.preload(LEGACY_SKY_MODEL_PATH);

src/pages/gallery/page.tsx

@@ -165,6 +165,8 @@ function GalleryScene({
         enableDamping
         autoRotate
         autoRotateSpeed={0.5}
+        minPolarAngle={Math.PI * 0.18}
+        maxPolarAngle={Math.PI * 0.48}
       />
     </>
   );
@@ -274,7 +276,6 @@ export function GalleryPage(): React.JSX.Element {
           <Canvas camera={{ position: [3.5, 2.4, 4.5], fov: 45 }} dpr={[1, 2]}>
             <Suspense fallback={null}>
               <GalleryScene
-                key={activeModel.id}
                 model={activeModel}
                 onTextureDiagnosticReady={setTextureDiagnostic}
               />