Three.js란?

Three.js는 웹페이지에 3D 객체를 쉽게 렌더링 할 수 있게 도와주는 자바스크립트 라이브러리이다.

WebGL 기술을 기반으로 렌더링과 카메라, 조명 등의 3D기술을 간단하고 직관적으로 구현할 수 있도록 제공한 라이브러리이다.

WebGL: 점, 선, 삼각형을 그리는 아주 단순한 시스템이다.

Three.js 구조

Three.js 에서 가장 기본이 되는 것은 Renderer, Scene, Camera이다.

Scene을 만들고, 그 안에 3D 객체를 넣고, Camera는 요소를 비추는 역할을 한다. 그리고 Renderer를 통해 HTML Canvas안에 Rendering 하여 보여주는 것이다.

Three.js 구조 요약

Renderer

Three.js의 핵심 객체이다. Scene과 Camera 객체 데이터를 넘겨받아 화면 안에 3D Scene의 일부를 2차원 평면 이미지로 렌더링 해주는 역할을 한다.

Scene

Scene은 다수의 Mesh, Light, Group, Object3D, Camera로 이루어진 트리 구조이다. Scene은 트리 구조에서 최상위 노드이다.

배경색과 안개 등의 요소를 포함하며 여러 개의 오브젝트, 빛, 질감들을 표현하는 화면이다.

Scene에 포함된 객체들 또한 부모/자식의 트리 구조로 이루어지며 이는 각 객체의 유래와 방향성을 나타낸다. 쉽게 말해 자식 객체의 위치와 방향이 부모 기준이다.

Camera

도식화 그림에서 Camera는 반쯤 나가 있는데, 이는 의도된 것으로 다른 객체와 달리 Camera는 Scene 그래프에 포함되지 않는다.

카메라는 Scene객체를 촬영하여 어떻게 보여줄 것인가를 결정한다.

Light

여러 종류의 광원이다. 주변광(AmbientLight)이나 집중광(SpotLight) 등 다양한 광원을 통해 물체들을 3D공간상에서 볼 수 있다.

Mesh(Object3D)

Mesh는 3D화면을 구성하는 물체로, 어떤 Material로 하나의 Geometry를 그리는 객체이다. Mesh가 만들어지면 설정 값을 통해 3D 공간 상의 위치와 자세를 결정할 수 있다. Material, Geometry는 재사용이 가능하여 여러 개의 Mesh가 하나의 Material 또는 Geometry를 동시에 참조할 수 있다.

파란색 정육면체 2개를 그린다고 가정해보자. 일단 두 정육면체의 위치가 달라야 하니, 2개의 Mesh가 필요하다. 그리고 정점(vertext, 꼭짓점) 데이터를 가진 한 개의 Geometry와 채색을 위한 하나의 material을 필요할 것이다.

Geometry

구, 정육면체 면, 등등 다양한 것이 될 수 있으며 내장 객체를 통해 만들 수도 있고, 파일을 통해 가져와 형상을 만들 수 있다.

Material

표면 속성으로 색상, 투명도, 질감 등을 나타낼 때 사용한다.