[Three.js] 02) 조명, 그림자, 인터랙티브 UI

PBR 재질과 조명의 종류

챕터1에서 Cube에 사용한 MeshBasicMaterial은 자체적으로 색을 발산하는 재질로 별도의 조명이 필요 없었다. 하지만 현실적인 3D 그래픽을 위해서 빛의 영향을 받는 재질인 MeshStandardMaterial을 사용해야한다. Unity에서의 Standard (Lit) 머티리얼과 같은 PBR(물리 기반 렌더링) 재질로, 반드시 씬에 조명이 있어야만 눈에 보이는 특징이 있다.

 

[Three.js] 01) 기본 구조, 기본 씬, 인터랙션

 

Three.js는 Unity와 비슷하게 다양한 조명을 제공한다.

 

• AmbientLight(환경광) : 씬 전체에 빛을 은은하게 더해 그림자로 인해 완전히 까맣게 되는 부분을 없애준다. 그림자를 만들진 못한다.
• DirectionalLight(직사광) : 태양처럼 한 방향으로 내리쬐는 빛이다. 씬 전체에 영향을 주고 그림자를 만드는 주된  광원으로 사용된다.
• PointLight(점 광원) : 백열전구처럼 한 점에서 사방으로 퍼져나가는 빛이다.
• SpotLight(스팟 광원) : 무대 조명이나 손전등 처럼 특정 영역을 원뿔 형태로 비춘다.

 

---

 

그림자 구현의 필수 요소

Three.js에서 그림자를 구현하려면 네 가지 조건이 모두 충족되어야 그림자가 렌더링 된다.

• renderer.shadowMap.enabled = true; -> 렌더러에게 그림자 계산 과정 활성화를 명령한다.
• light.castShadow = true;  -> 그림자를 만들 광원을 설정
• mesh.castShadoe = true; -> 그림자를 드리울 오브젝트를 설정한다.
• mesh.receiveShadow = true; -> 그림자가 그려질 바닥이나 벽을 설정한다.

 

---

 

lil-gui

lil-gui는 코드의 변수를 웹페이지의 UI(슬라이더, 드롭다운 등)와 연결해주는 라이브러리다. lil-gui를 사용해 조명의 위치. 각도, 색상, 오브젝트의 거칠기를 수정하고 새로고침의 필요없이 실시간으로 변경해 각 속성의 의미와 결과를 확인하고 싶었다.

// lil-gui 라이브러리 import
import GUI from 'https://cdn.jsdelivr.net/npm/lil-gui@0.19/+esm';

// GUI 패널 생성
const gui = new GUI();

// DirectionalLight의 강도(intensity)를 조절하는 슬라이더 추가
gui.add(directionalLight, 'intensity').min(0).max(10).step(0.01).name('빛 강도');

// 큐브 재질의 색상(color)을 조절하는 컬러 피커 추가
gui.addColor(material, 'color').name('큐브 색상');

// 조명 종류를 선택하는 드롭다운 메뉴 추가
const lightParams = { lightType: 'Directional' };
gui.add(lightParams, 'lightType', ['Directional', 'Point', 'Spot'])
   .name('조명 종류')
   .onChange(value => {
       // 선택된 값(value)에 따라 조명을 켜고 끄는 로직
   });

 

---

 

결과물

 

 

 

 

---

 

다음 챕터에서는 단순 큐브 외의 3D 모델을 임포트 해 씬에 배치하는 내용을 다뤄보려고 한다.

 

전체 코드 GitHub 링크

 

https://github.com/sgho0915/threejs-learn/tree/master/02-lights-shadow-control

threejs-learn/02-lights-shadow-control at master · sgho0915/threejs-learn