[Three.js] Three.js 기본 개념 공부하기 2

Three.js를 사용하여 3D 그래픽이나 애니메이션을 구성하기 위해서는 먼저 Three.js의 기본 구성 요소와 원리에 대해 이해해야 한다고 생각한다.

그렇기 때문에 오늘은 3D 그래픽을 구성하는 기본 요소들에 대해 알아보도록 하겠다.

 

1. Scene (장면)

Scene은 3D 그래픽을 구성하는 기본적인 공간이나 무대라고 할 수 있다. Three.js의 모든 랜더링 객체가 포함되는 요소다.

const scene = new THREE.Scene();

 

이런식으로 빈 Scene 객체를 생성하여 3D 모델, 조명, 카메라 등 다양한 요소들을 포함시킬 수 있다.

 

 

2. Camera (카메라)

Camera는 단어 뜻 그대로 Scene 내의 객체들을 어떻게 볼 것인지를 정의한다. Three.js에서 주로 사용하는 카메라는 PerspectiveCamera와 OrthographicCamera가 있으며, PerspectiveCamera는 인간의 눈과 유사한 시야를 제공하며, OrthographicCamera는 평행 투영을 사용합니다.

const camera = new THREE.PerspectiveCamera(
    75, // 시야각
    window.innerWidth / window.innerHeight, // 종횡비
    0.1, // 가까운 평면
    1000 // 먼 평면
);

camera.position.set(0, 0, 5);

 

이런식으로 시야각, 종횡비, 가까운 평면 (요소들을 가장 가까이 볼수있는 시야 거리), 먼 평면 (요소들을 가장 멀리 볼수있는 시야 거리), 위치 등을 설정하여 카메라를 생성할 수 있다.

 

 

3. Renderer (렌더러)

Renderer는 Scene과 Camera를 사용하여 최종 3D 그래픽을 생성하는 역할을 한다. Three.js에서는 주로 WebGLRenderer를 사용한다. 렌더러는 HTML의 <canvas> 요소와 결합되어 장면을 화면에 렌더링한다.

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 렌더러의 크기 설정 (브라우저 창의 너비와 높이)
document.body.appendChild(renderer.domElement);

 

이런식으로 WebGL을 사용하여 3D 그래픽을 렌더링할 준비를 하고, 브라우저에 표시할 너비와 높이를 설정하여, 그 결과를 HTML 요소에 출력하여 웹 페이지에 나타나도록 한다.

 

 

4. Mesh (메쉬)

Mesh는 기하학(Geometry)과 재질(Material)을 결합하여 화면에 렌더링할 수 있는 3D 객체를 생성한다.

const geometry = new THREE.BoxGeometry(); // 형태 설정 (큐브 형태)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 색상 설정
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

 

위와 같이 Geometry와 Material, 모양과 재질을 설정하고 이를 담아서 큐브 모양의 메쉬를 생성할 수 있다.

 

 

5. Light (조명)

Light는 단어 뜻 그대로 조명, 장면 내의 객체를 비추는 역할을 한다. Three.js에서는 여러 종류의 조명이 제공되며, 가장 일반적으로 사용되는 조명은 PointLight, DirectionalLight, AmbientLight 등이 있다.

const light = new THREE.PointLight(0xffffff, 1, 100); (색상, 빛의 세기, 도달 가능한 최대 거리)
light.position.set(10, 10, 10);
scene.add(light);

 

위와 같이 색상이나 세기, 거리나 위치 등을 설정하여 3D 객체를 비추는 조명을 생성한다.

 

 

6. Animation (애니메이션)

애니메이션 루프를 통해 장면의 업데이트와 렌더링을 처리할 수 있다. 예를 들면 requestAnimationFrame 함수를 사용하여 애니메이션을 부드럽게 실행할 수 있다.

 

function animate() {
    requestAnimationFrame(animate);

    // 예시: 큐브 회전
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

 

위와 같이 애니메이션을 이용하여 큐브를 회전 방향과 함께 설정하여 회전시킬 수 있다.

 

 

 

그림으로 표현하면

출처 : 인프런 Three.js로 시작하는 3D 인터랙티브 웹 강의자료

 

이런식으로 한눈에 알아볼 수 있다.

다음에는 공부한 개념들을 이용하여 직접 3D 객체를 렌더링하는 과정을 포스팅 하겠다.