[javascript] Three.js를 이용한 광택 및 반사 효과

29 Nov 2023

Three.js는 웹에서 3D 그래픽을 생성하고 조작할 수 있는 JavaScript 라이브러리입니다. 이번 포스트에서는 Three.js를 사용하여 광택 및 반사 효과를 구현하는 방법에 대해 알아보겠습니다.

Three.js 설정

먼저 Three.js를 사용하기 위해 해당 라이브러리를 웹 페이지에 추가해야 합니다. HTML 파일의 <head> 태그 안에 다음 코드를 추가하여 Three.js를 가져옵니다.

<script src="https://threejs.org/build/three.js"></script>

광택 및 반사 효과를 구현하기 위해 Three.js의 재질(Material)을 설정해야 합니다. 재질은 물체의 표면을 나타내는 속성으로, 광택과 반사 효과를 조절할 수 있습니다. 다음은 재질을 생성하는 방법입니다.

const material = new THREE.MeshPhongMaterial({
  color: 0x404040, // 재질의 색상
  specular: 0xffffff, // 광택의 색상
  shininess: 100, // 광택의 강도
});

MeshPhongMaterial은 Three.js에서 기본으로 제공하는 재질 중 하나로, 광택과 반사 효과를 지원합니다.

Three.js에서 광택 효과를 구현하기 위해 광원(Light)을 추가해야 합니다. 광원은 재질에 반사되는 빛을 제공하는 역할을 합니다. 다음은 Directional Light(직사광)을 설정하는 예시입니다.

const light = new THREE.DirectionalLight(0xffffff, 1); // 빛의 색상, 강도
light.position.set(0, 1, 0); // 빛의 위치
scene.add(light);

위의 코드에서 0xffffff은 흰색을 뜻하며, 1은 빛의 강도를 나타냅니다.

광택과 반사 효과를 구현하기 위해 Three.js의 Reflective 속성을 이용합니다. Reflective는 재질에 반사되는 객체를 생성하는 속성으로, 재질과 광원이 함께 사용됩니다. 다음은 반사 효과를 설정하는 예시입니다.

const reflectiveMaterial = new THREE.MeshStandardMaterial({
  color: 0x404040, // 재질의 색상
  envMap: reflectionCube, // 반사되는 이미지
});

envMap은 반사되는 이미지를 설정하는 부분인데, 이 부분은 Cube Camera(큐브 카메라)를 사용하여 설정할 수 있습니다.

Three.js를 사용하여 광택 및 반사 효과를 구현하는 방법에 대해 알아보았습니다. Three.js의 재질과 광원, 반사 효과를 설정하여 웹에서 뛰어난 3D 그래픽을 만들 수 있습니다. 이를 통해 웹 상에서 보다 흥미로운 사용자 경험을 제공할 수 있습니다.