Three.js에서 조명과 재질을 사용해보자!

Three.js로 3D 장면을 구성할 때, 조명과 재질은 장면을 더욱 현실감 있게 만들어주는 중요한 요소다. 조명을 통해 객체에 입체감을 더하고, 다양한 재질을 적용하여 시각적으로 매력적인 3D 장면을 만들 수 있다. 이번 글에서는 Three.js에서 제공하는 다양한 조명과 재질의 종류와 사용법을 알아보겠다.

 

 

이전 글

1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽

2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일

3. [개발자일기/3D 웹 세상] - Three.js의 기본 개념과 원리

4. [개발자일기/3D 웹 세상] - React와 Three.js의 결합: react-three-fiber

5. [개발자일기/3D 웹 세상] - react-three-fiber로 간단한 3D 객체 렌더링하기

 

 

---

 

1. Three.js에서 조명의 역할과 종류

 

Three.js에서 조명은 3D 객체에 빛을 비추어 현실감 있는 그림자를 생성하고, 객체의 깊이와 형태를 강조하는 데 중요한 역할을 한다. Three.js는 다양한 종류의 조명을 제공하며, 각 조명은 특정한 상황에서 유용하게 활용된다.

 

주요 조명 종류

 

1) AmbientLight (환경광)

• 장면 전체에 고르게 빛을 비추는 조명이다.
• 기본적인 조명으로 사용되며, 장면에 부드러운 빛을 추가할 때 유용하다

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 흰색, 밝기 0.5
scene.add(ambientLight);

 

2) DirectionalLight (직사광)

• 태양처럼 특정 방향에서 평행하게 빛을 비춘다. 그림자를 만들 수 있다.
• 햇빛과 같은 직사광을 표현할 때 적합하다.

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 7.5); // 위치 설정
directionalLight.castShadow = true; // 그림자 설정
scene.add(directionalLight);

 

3) PointLight (점광원)

• 특정 위치에서 모든 방향으로 빛을 발산한다.
• 전구와 같은 점광원 표현에 적합하다.

const pointLight = new THREE.PointLight(0xff0000, 1, 100); // 빨간색, 밝기 1, 거리 100
pointLight.position.set(2, 3, 4);
scene.add(pointLight);

 

4) SpotLight (스포트라이트)

• 원뿔 형태로 특정 방향으로 빛을 집중적으로 비춘다. 그림자 생성 가능.
• 무대 조명이나 특정 객체를 강조할 때 사용한다.

const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(5, 10, 5);
spotLight.castShadow = true;
scene.add(spotLight);

---

 

2. Three.js에서 재질(Material)의 역할과 종류

 

3D 객체의 표면 질감을 결정하는 재질(Material)은 객체가 빛을 반사하고 흡수하는 방식을 정의한다. Three.js에서는 여러 종류의 재질을 제공하며, 각 재질은 빛과의 상호작용 방식이 다르다.

 

주요 재질 종류

 

1) MeshBasicMaterial

• 빛의 영향을 받지 않는 기본 재질이다.
• 조명이 필요 없는 단순한 색상 표현에 적합하다.

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

 

2) MeshStandardMaterial

• 표준 물리 기반 재질로, 빛의 영향을 받아 반사와 그림자를 표현할 수 있다.
• 물체가 빛을 반사하는 모습을 표현하고 싶을 때 사용한다.

const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.5 });

 

3) MeshPhongMaterial

• 빛의 반사와 하이라이트를 표현하는 재질로, 물체가 광택을 가지고 있는 것처럼 보이게 한다.
• 유리나 금속처럼 반짝이는 표면을 표현할 때 적합하다.

const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });

 

4) MeshLambertMaterial

• 표면의 밝기를 단순하게 계산하는 재질로, 빠른 렌더링에 유리하다.
• 실시간 렌더링이 중요한 상황에서 사용할 수 있다.

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

 

---

 

3. 예제: 조명과 재질을 활용한 3D 큐브 생성하기

 

이제 조명과 재질을 사용하여 3D 큐브를 만들어 보자. 조명으로는 AmbientLight와 PointLight를 사용하고, 재질로는 MeshStandardMaterial을 적용하여 큐브가 빛을 받았을 때의 반사 효과를 확인해 보겠다.

 

import * as THREE from 'three';
import { Canvas } from '@react-three/fiber';

function Box() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" roughness={0.5} metalness={0.8} />
    </mesh>
  );
}

function Scene() {
  return (
    <Canvas>
      <ambientLight intensity={0.3} />
      <pointLight position={[10, 10, 10]} intensity={1} />
      <Box />
    </Canvas>
  );
}

export default Scene;

 

 

• ambientLight: 장면 전체에 부드럽게 빛을 비추는 역할을 한다. 밝기를 조절하여 기본적인 조명 상태를 설정한다.
• pointLight: 특정 위치에서 큐브를 향해 빛을 비춘다. 빛이 객체에 닿으면 반사 효과가 더욱 현실감 있게 표현된다.
• meshStandardMaterial: 빛에 반응하는 표준 재질로, roughness와 metalness 속성을 사용해 큐브의 표면 질감을 조정할 수 있다.

 

위 예제는 Three.js에서 조명과 재질이 3D 객체의 표현에 얼마나 중요한 역할을 하는지 확인할 수 있는 간단한 예제다. 큐브는 pointLight의 위치에 따라 빛을 반사하게 되며, ambientLight가 장면 전체에 부드러운 조명을 더해준다.

 

---

 

결론

 

Three.js에서 조명과 재질을 적절하게 사용하면 3D 장면에 깊이와 입체감을 더할 수 있다. 조명은 빛의 종류와 위치에 따라 장면의 분위기를 결정하며, 재질은 객체의 표면 질감과 반사 효과를 표현해준다. 다양한 조명과 재질을 실험해 보면서, 3D 장면을 더욱 사실적으로 구성해 보자.