3d 렌더링

Author: EunbinJung

src/domains/shared/components/3d/HomeModel.tsx

@@ -12,7 +12,7 @@ function Model({ onLoaded }: { onLoaded: () => void }) {
 
   useEffect(() => {
     const isMobile = window.innerWidth < 768; // 모바일 기준 너비
-    setScale(isMobile ? 8 : 13); // 모바일이면 작게
+    setScale(isMobile ? 3.8 : 11.5); // 모바일이면 작게
   }, []);
 
   useEffect(() => {
@@ -26,19 +26,18 @@ function Model({ onLoaded }: { onLoaded: () => void }) {
   scene.traverse((child) => {
     if ((child as THREE.Mesh).isMesh) {
       const mesh = child as THREE.Mesh;
-      if (mesh.material) {
-        const material = child.material as THREE.MeshPhysicalMaterial;
-        material.envMapIntensity = 3;
-        material.metalness = 1;
-        material.roughness = 0.3;
-        material.emissiveIntensity = 2;
-        material.clearcoat = 1;
-        material.clearcoatRoughness = 0.2;
-        material.needsUpdate = true;
-        material.opacity = 0.35;
-        material.bumpScale = 0.3;
-        material.thickness = 0.1;
-      }
+      const material = mesh.material as THREE.MeshPhysicalMaterial;
+
+      material.envMapIntensity = 3;
+      material.metalness = 1;
+      material.roughness = 0.3;
+      material.emissiveIntensity = 2;
+      material.clearcoat = 1;
+      material.clearcoatRoughness = 0.2;
+      material.needsUpdate = true;
+      material.opacity = 0.35;
+      material.bumpScale = 0.3;
+      material.thickness = 0.1;
     }
   });
 
@@ -64,7 +63,7 @@ function CameraAnimation() {
 
 function HomeModel({ onLoaded }: { onLoaded: () => void }) {
   return (
-    <Canvas className="z-10 w-full" camera={{ position: [5, 20, 10], fov: 30 }}>
+    <Canvas className="z-10 w-full" camera={{ position: [5, 20, 10], fov: 30 }} dpr={[1, 1.5]}>
       <ambientLight intensity={0.5} />
       <pointLight position={[10, 30, 40]} intensity={1} />
       <spotLight position={[0, 10, 10]} angle={0.2} penumbra={1} intensity={15} castShadow />
@@ -81,12 +80,13 @@ function HomeModel({ onLoaded }: { onLoaded: () => void }) {
         target={[0, 0, 0]}
       />
 
-      <EffectComposer>
+      <EffectComposer multisampling={0}>
         <Bloom
           intensity={0.65}
           luminanceThreshold={0.9}
           luminanceSmoothing={0.2}
           luminanceColor={new THREE.Color(1, 1, 1)}
+          mipmapBlur
         />
       </EffectComposer>
     </Canvas>

src/domains/shared/components/3d/Landing.tsx

@@ -12,8 +12,11 @@ function Landing() {
     <>
       {isLoading && <Spinner />}
       <div className="page-layout max-w-full">
-        <HomeModel onLoaded={() => setIsLoading(false)} />
-        {!isLoading && <StarMain />}
+        <div className="relative w-full h-[1000px]">
+          <HomeModel onLoaded={() => setIsLoading(false)} />
+          {!isLoading && <StarMain />}
+        </div>
+        <div className="w-full h-[1000px]"></div>
       </div>
     </>
   );