📌 Three.js에서 조명과 그림자 적용하기 – 더 현실적인 3D 씬 만들기

📌 Three.js에서 조명과 그림자 적용하기 – 더 현실적인 3D 씬 만들기

이전 글에서는 Three.js에서 3D 모델 애니메이션을 불러오고, 재생 및 속도를 조절하는 방법을 배웠습니다.
이번 글에서는 조명과 그림자를 추가하여 3D 씬을 더욱 사실적으로 표현하는 방법을 다룹니다.

---

🚀 1. Three.js에서 조명이 중요한 이유

3D 씬에서 조명은 입체감과 사실감을 결정하는 핵심 요소입니다.
Three.js는 여러 종류의 조명을 제공하며, 이를 적절히 조합하면 더욱 리얼한 3D 환경을 만들 수 있습니다.

✅ Three.js에서 지원하는 조명 종류

조명 종류 설명

AmbientLight	전체적으로 부드러운 빛을 추가
DirectionalLight	태양광처럼 직선으로 빛을 쏨
PointLight	전구처럼 모든 방향으로 빛을 방출
SpotLight	특정 방향으로 빛을 집중시킴
HemisphereLight	하늘과 땅의 색상을 반영하는 조명

---

🛠 2. Three.js 씬에 조명 추가하기

✅ 1) 기본 조명 설정

📌 src/components/LightingScene.jsx

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { useRef } from "react";
import * as THREE from "three";

const LightingScene = () => {
  const pointLightRef = useRef();

  return (
    <Canvas camera={{ position: [0, 3, 5], fov: 50 }}>
      {/* 기본 환경광 (Ambient Light) */}
      <ambientLight intensity={0.3} />

      {/* 태양광 같은 조명 (Directional Light) */}
      <directionalLight position={[5, 5, 5]} intensity={1} />

      {/* 전구 조명 (Point Light) */}
      <pointLight ref={pointLightRef} position={[2, 2, 2]} intensity={1} />

      {/* 그림자 활성화 */}
      <mesh receiveShadow castShadow>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>

      {/* 바닥 추가 */}
      <mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]}>
        <planeGeometry args={[10, 10]} />
        <meshStandardMaterial color="gray" />
      </mesh>

      <OrbitControls />
    </Canvas>
  );
};

export default LightingScene;

📌 설명

• ambientLight로 전체적인 조명을 추가
• directionalLight를 사용해 그림자가 생기도록 설정
• pointLight로 전구 같은 효과 구현
• receiveShadow와 castShadow 속성을 추가하여 그림자 활성화

---

🎯 3. Three.js에서 그림자 설정하기

Three.js에서 그림자가 정상적으로 렌더링되려면 몇 가지 설정이 필요합니다.

✅ 1) 그림자 활성화

반응형

Three.js에서는 Renderer와 Light에서 그림자를 활성화해야 합니다.

<Canvas shadows camera={{ position: [0, 3, 5], fov: 50 }}>

<directionalLight castShadow position={[5, 5, 5]} intensity={1} />

<mesh receiveShadow castShadow>
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial color="orange" />
</mesh>

---

✅ 2) 바닥에 그림자 받기

바닥이 그림자를 받으려면 receiveShadow를 설정해야 합니다.

<mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]}>
  <planeGeometry args={[10, 10]} />
  <meshStandardMaterial color="gray" />
</mesh>

---

🏗 4. 그림자 품질 개선하기

기본 그림자는 흐리게 보일 수 있습니다. 더 선명하게 만들려면 다음 설정을 추가합니다.

📌 DirectionalLight 그림자 해상도 개선

const directionalLight = useRef();

useEffect(() => {
  if (directionalLight.current) {
    directionalLight.current.shadow.mapSize.width = 2048;
    directionalLight.current.shadow.mapSize.height = 2048;
    directionalLight.current.shadow.camera.near = 0.5;
    directionalLight.current.shadow.camera.far = 50;
  }
}, []);

이렇게 설정하면 그림자가 더 선명하고 사실적으로 표현됩니다.

---

🎛 5. 조명 및 그림자 실전 적용

✅ 1) 3D 모델과 조명 결합

이제 조명을 추가한 씬에서 3D 모델을 로딩해보겠습니다.

📌 src/components/LightingModelViewer.jsx

import { Canvas } from "@react-three/fiber";
import { OrbitControls, useGLTF } from "@react-three/drei";

const Model = () => {
  const { scene } = useGLTF("/models/robot.glb");
  return <primitive object={scene} scale={1.5} />;
};

const LightingModelViewer = () => {
  return (
    <Canvas shadows camera={{ position: [0, 3, 5], fov: 50 }}>
      <ambientLight intensity={0.3} />
      <directionalLight castShadow position={[5, 5, 5]} intensity={1} />
      <pointLight position={[2, 2, 2]} intensity={1} />

      {/* 3D 모델 */}
      <Model />

      {/* 바닥 */}
      <mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]}>
        <planeGeometry args={[10, 10]} />
        <meshStandardMaterial color="gray" />
      </mesh>

      <OrbitControls />
    </Canvas>
  );
};

export default LightingModelViewer;

---

✅ 6. 최종 결과

✔ AmbientLight, DirectionalLight, PointLight 추가
✔ 3D 오브젝트 및 바닥 그림자 설정
✔ 그림자 품질 향상 (mapSize 설정)
✔ 3D 모델을 조명과 함께 배치

🚀 이제 npm run dev로 실행하면 조명이 추가된 3D 씬을 볼 수 있습니다!

---

🔥 7. 다음 단계: 성능 최적화 & 로딩 속도 개선

지금까지 우리는 Three.js에서 조명을 추가하고, 그림자를 설정하는 방법을 배웠습니다.
다음 글에서는 성능 최적화 기법 (Lazy Loading, Draco 압축, PostProcessing) 등을 활용하여 더욱 부드럽고 빠르게 로딩하는 방법을 다룰 예정입니다.

✅ 다음 편 예고:
"Three.js에서 성능 최적화 & 로딩 속도 개선하기" 🚀