6가지 종류의 빛 만들기 – Three.js 강좌

안녕하세요. 이제 three.js에서 제공하는 빛에 대해서 배워볼게요. 저번 시간에 배웠던 카메라만큼 중요한 개념 중에 하나입니다. three.js를 통해 표현할 수 있는 빛의 종류들과 실제 코드로 어떻게 구현하는지, 그리고 빛의 위치나 방향을 알려주는 Helper 활용법 등을 알아볼게요.

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

빛의 종류 6가지

AmbientLight : 모든 오브젝트를 대상으로 전역에 빛을 비춥니다.

DirectionalLight : 특정 방향으로 빛을 비춥니다.. 해 같은 느낌이죠.

HemisphereLight : 하늘색, 지상 색으로 설정하여 위아래로 빛을 비춥니다.

PointLight : 한 방향으로 빛을 비춥니다. 전구를 생각하면 편합니다.

RectAreaLight : 직사각형 평면에 균일하게 빛을 비춥니다.

SpotLight : 원뿔 모양으로 빛으로 특정 영역을 비춥니다.

// 전역으로 빛 비춰줌
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
scene.add(ambientLight);

// 특정 방향으로 빛 방출
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// 하늘과 땅 컬러 지정
const hemisphereLight = new THREE.HemisphereLight(0x004fff, 0xff0000, 1);
scene.add(hemisphereLight);

// 한 방향으로 빛 방출 (예. 전구)
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(1, 1, 1);
scene.add(pointLight);

// 직사각형 빛 방출
const rectLight = new THREE.RectAreaLight(0xffffff, 2, 1, 1);
rectLight.position.set(0.5, 0.5, 1);
rectLight.lookAt(0, 0, 0);
scene.add(rectLight);

// 직사각형 빛 방출
const spotLight = new THREE.SpotLight(0xffffff, .5);
spotLight.position.set(0.5, 0.5, 1);
scene.add(spotLight);

빛의 위치를 알 수 있게 도와주는 Helper 사용법

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// 빛 헬퍼 추가
const dlhelper = new THREE.DirectionalLightHelper(directionalLight, 0.5);
scene.add(dlhelper);