diff --git a/src/components/three/world/SkyModel.tsx b/src/components/three/world/SkyModel.tsx index a3e89cd..70fea1d 100644 --- a/src/components/three/world/SkyModel.tsx +++ b/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(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); diff --git a/src/pages/gallery/page.tsx b/src/pages/gallery/page.tsx index 3614351..b3ea455 100644 --- a/src/pages/gallery/page.tsx +++ b/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 {