Three.js는 웹페이지에 3D 객체를 쉽게 렌더링하도록 도와주는 JavaScript 3D 라이브러리입니다.
대부분의 경우 Three.js는 3D 객체를 렌더링하는 데 WebGL을 사용합니다. 때문에 Three.js = WebGL이라고 착각하기 쉽죠. 하지만 WebGL은 점, 선, 삼각형만을 그리는 아주 단순한 시스템입니다. WebGL로 직접 씬(scenes), 광원, 그림자, 물체, 텍스처 등 3차원 세계를 구현한다면 굉장히 복잡할 겁니다. Three.js는 이런 3D 요소들의 처리를 도와 직관적인 코드를 짤 수 있도록 해줍니다.
Three.js의 구조를 도식화한 도표
Three.js의 핵심 객체 중 하나인 Renderer는 Scene과 Camera 객체를 받아, 카메라의 절두체(frustum) 안에 있는 3D 씬의 일부를 평면(2D) 이미지로 렌더링합니다.
Scene 또는 다수의 Mesh, Light, Group, Object3D, Camera로 구성된 트리 구조와 유사합니다. Scene은 Scene Graph의 최상위 노드로, 배경색과 안개 같은 요소를 포함합니다. Scene에 속한 모든 객체는 부모-자식 관계의 트리 구조로 구성되며, 각 객체의 위치(position)와 방향(orientation)은 부모를 기준으로 결정됩니다.
Camera는 Scene Graph에 반드시 포함될 필요는 없습니다. 그러나 다른 객체와 마찬가지로 Camera도 다른 객체의 자식이 될 수 있으며, 이 경우 부모 객체의 움직임에 따라 Camera도 함께 이동합니다.
Mesh는 하나의 Geometry를 특정 Material로 그려주는 객체입니다. Material과 Geometry는 재사용이 가능하여, 여러 Mesh가 동일한 Material이나 Geometry를 참조할 수 있습니다.
Geometry는 기하학적 객체의 정점 데이터를 나타냅니다. 구, 정육면체, 평면과 같은 기본 도형부터 개, 고양이, 사람, 나무, 건물 등 다양한 형태로 표현될 수 있습니다. Three.js는 기본적으로 몇 가지 내장된 기하학 객체를 제공하며, 직접 기하학 객체를 생성하거나 외부 파일에서 불러올 수도 있습니다.
Material은 기하학적 객체를 렌더링할 때 사용하는 표면 속성으로, 색상이나 밝기 등의 특성을 지정할 수 있습니다.
Texture는 이미지 파일, canvas로 생성한 이미지, 또는 다른 Scene 객체에서 렌더링한 결과물을 포함합니다.