Three.js는 웹 브라우저에서 3D 그래픽을 생성하고 조작할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 강력한 3D 시각화를 만들 수 있으며, 그 중 하나인 조명 효과를 다루어 보겠습니다.
1. 조명 타입(Light Type)
Three.js는 다양한 조명 타입을 지원하며, 각 조명 타입에 따라 다른 효과를 만들 수 있습니다. 주요 조명 타입은 다음과 같습니다:
AmbientLight: 주변 조명으로, 모든 객체에 균일한 조명을 제공합니다.DirectionalLight: 방향 조명으로, 모든 객체에 직선으로 조명을 제공합니다.PointLight: 지점 조명으로, 특정 위치에서 모든 방향으로 조명을 제공합니다.SpotLight: 스포트 조명으로, 특정 위치에서 특정 방향을 조명합니다.
2. 조명 추가하기
Three.js에서 조명을 추가하는 방법은 간단합니다. 먼저, 씬(Scene)에 조명 객체를 생성한 후, 씬에 추가하면 됩니다. 다음은 AmbientLight와 PointLight를 추가하는 예제 코드입니다:
// 씬 생성
const scene = new THREE.Scene();
// 주변 조명 생성 및 추가
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 지점 조명 생성 및 추가
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(0, 10, 0);
scene.add(pointLight);
위 코드에서 AmbientLight는 흰색(0xffffff)으로, 밝기는 0.5로 설정되었습니다. PointLight는 흰색으로, 밝기는 1로 설정되었으며, 위치는 (0, 10, 0)으로 설정되었습니다.
3. 조명 설정하기
조명을 추가한 후에는 조명에 대한 다양한 설정을 할 수 있습니다. 예를 들어 조명의 색상, 밝기, 위치 등을 조정할 수 있습니다. 다음은 DirectionalLight의 설정을 변경하는 예제 코드입니다:
// 방향 조명 생성
const directionalLight = new THREE.DirectionalLight(0xff0000, 0.8);
// 조명의 위치, 각도, 타겟 설정
directionalLight.position.set(5, 10, 5);
directionalLight.target.position.set(0, 0, 0);
// 조명의 쉐도우 맵 설정
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
// 씬에 조명 추가
scene.add(directionalLight);
위 코드에서 DirectionalLight의 색상은 빨간색(0xff0000)으로, 밝기는 0.8로 설정되었습니다. 조명의 위치는 (5, 10, 5)로 설정되었으며, 조명의 타겟의 위치는 원점으로 설정되었습니다. 또한, 조명에 쉐도우 맵을 설정하여 그림자 효과를 생성할 수 있습니다.
4. 조명의 영향 받는 객체 설정
조명을 추가한 후에는 조명의 영향을 받을 객체를 설정해야 합니다. 이 설정을 통해 객체에 희미한 조명 효과를 생성할 수 있습니다.
// 박스 생성
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
// 씬에 박스 추가
scene.add(boxMesh);
// 조명이 박스를 영향 받도록 설정
boxMesh.receiveShadow = true;
boxMesh.castShadow = true;
위 코드에서 박스 객체를 생성한 후, 이를 씬에 추가합니다. 그리고 receiveShadow와 castShadow 속성을 true로 설정하여 조명의 영향을 받도록 설정합니다.
5. 참고 자료
이와 같이 Three.js를 이용하여 조명 효과를 구현할 수 있습니다. Three.js의 다양한 조명 타입과 설정 옵션을 활용하여 웹에서 실시간 3D 조명 효과를 구현해보세요!