Three.js 시작하기

date

Oct 26, 2024

slug

start-three-js

author

status

Public

tags

Three.js

summary

type

Post

thumbnail

category

updatedAt

Nov 10, 2024 10:10 AM

Three.js 기본 요소와 주요 개념

1. Three.js의 핵심 구성 요소

1. 씬(Scene): 3D 객체들이 배치되는 공간입니다.

2. 카메라(Camera): 사용자의 시점을 나타냅니다.

3. 렌더러(Renderer): 씬과 카메라를 기반으로 화면에 이미지를 그립니다.

1.1 렌더러(Renderer)

• Scene과 Camera의 객체 데이터를 제공받아 웹사이트에 그려주는 역할을 합니다.

• 주로 WebGLRenderer를 사용하며, 이는 WebGL 기술을 활용합니다.

1. 렌더링 설정: 안티앨리어싱, 그림자, 포스트 프로세싱 등 다양한 렌더링 옵션을 제공합니다.

2. 크기 조절: setSize() 메서드로 렌더링 영역의 크기를 조절할 수 있습니다.

3. 렌더링 루프: requestAnimationFrame과 함께 사용하여 연속적인 렌더링을 수행합니다.

1.2 카메라(Camera)

Object3D 클래스

• 계층 구조: 부모-자식 관계를 가질 수 있어 계층 구조를 형성할 수 있습니다.

• 변환: position, rotation, scale 속성으로 객체의 위치, 회전, 크기를 조절할 수 있습니다.

• 가시성: visible 속성으로 객체의 렌더링 여부를 제어할 수 있습니다.

• 이름 지정: name 속성으로 객체에 이름을 부여할 수 있어 식별이 용이합니다.

• 사용자 데이터: userData 객체를 통해 사용자 정의 데이터를 저장할 수 있습니다.

• 이벤트: 다양한 이벤트(예: 클릭, 마우스오버 등)를 처리할 수 있습니다.

• Camera (PerspectiveCamera, OrthographicCamera 등)

• Light (DirectionalLight, PointLight 등)

• Mesh (3D 모델을 표현)

• Group (여러 Object3D를 그룹화)

• Scene (3D 씬을 나타냄)

주요 카메라 종류

1. PerspectiveCamera (원근법 카메라)
• 사람의 눈으로 보는 방식을 모방하여 설계되었습니다.
• 3D 렌더링하는데 가장 널리 쓰이는 카메라입니다.

2. OrthographicCamera (정투상도 카메라)
• 렌더링된 이미지에서 객체의 크기는 카메라와의 거리에 관계없이 일정하게 유지됩니다.
• 2D 장면과 UI 요소를 렌더링하는 데 유용합니다.

1.3 씬(Scene)

2. PerspectiveCamera 상세 설명

2.1 PerspectiveCamera 생성자

new THREE.PerspectiveCamera(fov, aspect, near, far)

2.2 매개변수

1. fov (Field of View) Number
• 시야각을 나타내며, 일반적으로 45~75 사이의 값을 사용합니다.
• 값이 클수록 더 넓은 시야를 보여줍니다.

2. aspect Number
• 카메라 프레임의 가로 세로 비율입니다.
• 보통 렌더러의 너비를 높이로 나눈 값을 사용합니다.
• 기본값은 1(정사각형 화면)입니다.

3. near Number
• 카메라가 렌더링을 시작하는 가장 가까운 지점입니다.
• 기본값은 0.1입니다.
• 유효 범위는 0보다 크고 현재 far(원평면) 값보다 작습니다.

4. far Number
• 카메라가 렌더링을 멈추는 가장 먼 지점입니다.(카메라 절두체 원평면입니다.)
• 기본값은 2000입니다.

2.3 사용 예시

this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);

updateProjectionMatrix() 메서드

• 카메라의 투영 행렬을 업데이트합니다.

• 투영 행렬은 3D 공간의 객체를 2D 화면에 어떻게 투영할지 결정합니다.

• 카메라 속성 변경 후

• 화면 크기 변경 시

3. WebGLRenderer 사용하기

3.1 렌더러 크기 설정

private resize() {
  const width = this.domApp.clientWidth;
  const height = this.domApp.clientHeight;

  const camera = this.camera;
  if (camera) {
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }

  this.renderer.setSize(width, height);
}

3.2 WebGLRenderer 주요 매개변수

• stencil: 스텐실 버퍼 사용 여부

• anti-aliasing: 안티앨리어싱 적용 여부
• 픽셀로 인한 계단 현상 발생 시 주변에 비슷한 색을 칠해 현상을 최소화하는 기법
• 사용되는 알고리즘들: SSAA, MSAA, SMAA, MLAA, TAA, FXAA, DLAA, DLSS2 등

3.3 주요 메서드

• setSize(width: Integer, height: Integer, updateStyle: Boolean): undefined
• 캔버스 크기를 조정하여 장치 픽셀 비율을 고려하고, 뷰포트도 (0,0)에서 시작해 해당 크기에 맞게 설정합니다.
• updateStyle: false로 두면 캔버스 스타일이 변경되지 않습니다.

4. 3D 객체 생성 및 애니메이션

4.1 Mesh 객체 생성

Mesh(geometry, material)

• geometry: 모양

• material: 재질

private setupModel() {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0x44a88 });
  this.cube = new THREE.Mesh(geometry, material);
  this.scene.add(this.cube);
}

4.2 Scene 렌더링 및 애니메이션 설정

private render(time: number) {
  // time은 처음 렌더링 시작된 이후 시간값 (단위: ms)
  this.update(time);
  this.renderer.render(this.scene, this.camera!);
}

4.3 애니메이션 구현 방법

requestAnimationFrame vs setAnimationLoop

1. requestAnimationFrame

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

• 브라우저의 표준 API
• 일반적인 웹 애플리케이션에서 사용
• 수동으로 루프를 제어해야 함
• VR 콘텐츠에는 적합하지 않음

2. setAnimationLoop

renderer.setAnimationLoop(function () {
  renderer.render(scene, camera);
});

• Three.js에서 제공하는 메서드
• WebXR 콘텐츠에 최적화
• 자동으로 루프를 관리
• VR 환경에서 더 나은 성능 제공

주요 차이점

• 제어: requestAnimationFrame은 수동 제어, setAnimationLoop는 자동 제어

• 성능: VR 환경에서는 setAnimationLoop가 더 나은 성능 제공

• 구현: requestAnimationFrame은 표준 웹 API, setAnimationLoop는 Three.js 메서드

기타 웹 애니메이션 구현 방법

1. setInterval 방식
• 애니메이션을 위해 특별히 설계된 메서드가 아님
• 불필요한 콜스택이 많이 발생할 수 있어 애니메이션에 지연이 생길 수 있음
• 브라우저의 렌더링 주기와 동기화되지 않아 프레임 건너뛰기 현상이 발생할 수 있음

2. requestAnimationFrame 방식
• 웹 브라우저의 표준 API로, 애니메이션을 위해 특별히 설계됨
• 브라우저의 렌더링 주기와 동기화되어 부드러운 애니메이션 구현 가능
• 일반적으로 1초에 약 60회(60fps) 실행되지만, 디스플레이의 주사율에 따라 달라질 수 있음
• 페이지가 비활성 상태일 때 자동으로 실행을 중지하여 CPU 리소스와 배터리 절약
• 성능 최적화에 도움이 됨

3. Three.js의 setAnimationLoop 방식
• Three.js 라이브러리에서 제공하는 메서드
• WebXR (VR/AR) 콘텐츠에 최적화
• 자동으로 애니메이션 루프를 관리
• VR 환경에서 더 나은 성능 제공