[javascript] Three.js의 주요 기능

29 Nov 2023

javascript

Three.js는 웹 브라우저에서 3D 그래픽을 구현하기 위한 자바스크립트 3D 라이브러리입니다. 이 라이브러리는 간단한 3D 도형부터 복잡한 가상 현실(Virtual Reality) 환경까지 구현할 수 있는 강력한 기능을 제공합니다. 이번에는 Three.js의 주요 기능들에 대해 알아보겠습니다.

1. 렌더러(Renderer)

Three.js는 WebGL을 기반으로 한 렌더러를 제공하여 웹 브라우저에서 3D 그래픽을 렌더링할 수 있습니다. 이 렌더러는 캔버스(Canvas) 요소를 이용하여 렌더링 결과를 보여줍니다.

// 렌더러 생성
const renderer = new THREE.WebGLRenderer();

// 렌더러의 크기 설정
renderer.setSize(window.innerWidth, window.innerHeight);

// 렌더러를 HTML 문서의 요소에 추가
document.body.appendChild(renderer.domElement);

2. 재질(Material)

Three.js에서는 3D 객체의 외관을 결정하는 재질(Material)을 다양하게 설정할 수 있습니다. 예를 들어, 색상, 텍스쳐, 빛의 반사 등을 조절하여 객체의 시각적인 효과를 구현할 수 있습니다.

// 재질 생성
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

// 3D 객체에 재질 적용
const cube = new THREE.Mesh(geometry, material);

3. 조명(Light)

Three.js에서는 명암과 빛의 반사를 표현하기 위해 조명(Light)을 추가할 수 있습니다. 주변광(Ambient Light), 점광원(Point Light), 햇빛(Directional Light) 등 다양한 종류의 조명을 설정할 수 있습니다.

// 주변광 생성
const light = new THREE.AmbientLight(0x404040);

// 3D 장면에 조명 추가
scene.add(light);

4. 애니메이션(Animation)

Three.js에서는 3D 객체의 움직임을 구현하기 위한 애니메이션(Animation) 기능을 제공합니다. 주어진 시간에 따라 객체의 위치, 회전 등을 조절하여 부드럽고 현실적인 움직임을 구현할 수 있습니다.

// 애니메이션 함수 정의
function animate() {
  requestAnimationFrame(animate);

  // 객체의 회전 속도 조절
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 렌더러에 장면과 카메라를 렌더링
  renderer.render(scene, camera);
}

// 애니메이션 시작
animate();

5. 카메라(Camera)

Three.js에서는 3D 장면을 보기 위한 카메라(Camera)를 설정할 수 있습니다. 시야각, 초점 거리, 위치 등을 조절하여 원하는 시점에서 장면을 관찰할 수 있습니다.

// 카메라 생성
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 카메라 위치 설정
camera.position.z = 5;

이외에도 Three.js에는 다양한 기능들이 있으며, 개발자들은 세련된 3D 그래픽 애플리케이션을 구현하기 위해 이러한 기능들을 활용할 수 있습니다. Three.js 공식 문서에서 더 많은 예제 및 자세한 정보를 확인할 수 있습니다.

참고 자료:

Three.js 공식 문서