1. Three.js

WebGL엔진을 기반으로 브라우저에서 3D 그래픽 구현을

보다 쉽고 직관적으로 생성, 관리할 수 있도록 제공해주는

라이브러리 이다. 기본적인 WebGL은 점, 선, 삼각형을 그리는

단순한 시스템을 가지고 있으며 Three.js를 사용하지 않아도

모든 그래픽 구현이 가능하지만 코드의 복잡도는 비교 조차

안될만큼 복잡해지고 관리 또한 난이도가 올라가기 때문에

아직 시도할 엄두가 나지 않지만 추 후 시간을 내어 다뤄봐도

좋은 경험이 될 것 같다.

2. Three.js 구조

Renderer

Scene, Camera 객체 데이터를 전달 받아 화면 내부 3D Scene의

일부 객체들을 2차원 평면 이미지로 렌더링해주는 핵심기능을 수행한다.

Scene

다수의 Mesh, Light, Group, Object3D, Camera로 이루어진 트리 구조이다.

배경색, 안개, 다수의 오브젝트, 빛, 질감 등을 표현하는 화면이다.

Scene은 최상위 노드이기 때문에 객체의 위치와 방향이 부모(Scene)기준이다.

Camera

Camera는 다른 구성 객체와는 달리 Scene 그래프에 포함되지 않으며

Scene객체를 촬영하여 어떻게 보여줄 것인가를 결정하는 역할을 한다.

Light

여러 종류의 광원을 말하며 이는 즉 조명을 뜻한다.

AmbientLight, SpotLight, DirectionalLight 등 다양한 광원을 활용하여

Scene에 존재하는 다양한 3D요소들을 3D 공간 공간에서 볼 수 있다.

Geometry

3D요소의 모양을 정의할 수 있으며 내장객체 또는 파일을 통해 형상을 만들 수 있다.

Material

질감을 뜻하며 표면의 색상, 투명도, 질감을 나타낼 수 있다.

Mesh(Object3D)

Mesh는 특정 Material의 속성을 가진 Geometry를 그리는 객체이다.

Mesh는 3D공간 상의 위치와 특정 기준 축 회전 등을 결정할 수 있으며

Material과 Geometry는 재사용이 가능하여 여러 Mesh가 특정

Material, Geometry를 동시 참조 가능한 특징이 있다.

마치며...

오늘은 Three.js의 기본 구성과 개념에 대한 포스팅만을 진행했지만 현재 Three.js를 사용한 프로젝트가 완성에 가까워졌고 완성된 이후에 Three.js에 대한 추가 포스팅을 진행할 예정이다. 언제나 개발을 통해 기능을 구현하는 것도 중요하지만 가장 중요한 것은 사용한 기술에 대한 개념, 원리를 명확히 이해하고 있는 것이라 생각하고 있고 나에게는 하나의 원칙이기도 하다. 앞으로도 근거 있는 기술의 사용과 검증 가능한 코드를 지속하기 위해 더 나은 노력할 것이다.