앗! 취업에 도움되는(?)Threejs를 복습해보자. [개념편 1탄]

작년 중순, 현재 회사에 입사 후, 3D WebGL 관련 프로젝트에 참여하게 되었다.

라이브러리 자체의 사용법도 생소했지만, 무엇보다 그래픽스 관련 수학 공부(선형대수학, 기하학 등)를 병행해야 하는 점이 까다로웠다.

이 게시글은 threejs를 처음 접했던 몇 달 전의 나로부터, 지금 이 글을 작성하고 있는 현재의 나에 이르도록 이 라이브러리에 대해 이해한대로 작성할 예정이다.

최대한 기술적인 용어를 자제하고, 비유적 표현을 이용하여 작성하였다.

Threejs는?

웹에서 3D 객체를 쉽게 다룰 수 있게 해주는 라이브러리이다.

정확한 설명은 자바스크립트 언어로 구현된 WebGL(Web Graphcis Library)이다.
threejs가 궁금하다면, 하단의 링크를 눌러 공식문서를 다녀와 보도록하자.
threejs 공식문서

Threejs 공식문서를 갔다왔는데, 알아야 할 것이 참 많아보인다.

핵심적으로 기억해야할 요소는 단 6가지이다.

지금부터, 당신이 유튜버라고 상상해보자.

• scene : 이름 그대로 3d 객체가 놓여질 '무대'이다.
• camera : 이름 그대로 scene의 일부분을 촬영할 '카메라'이다.
• renderer : 위의 scene과 camera를 이용하여 촬영된 결과물을 html의 canvas의 형태로서 그려주는 '기계'이다.
• mesh : scene(무대)위에 올라갈 '3d 객체(배우)'이다.
• geometry : mesh의 형태 속성이다.(ex. 큐브, 구, 원뿔 등)
• material : mesh의 색, 질감 등의 속성이다.(ex. 빨강, 노랑, 파랑),(ex. 금속같은 질감, 천 같은 질감)

당신은 어떤 촬영장(scene)에서, 카메라(camera)를 들고, 어떤 주사위 모양(geometry)의 나무질감(material)의 블럭(mesh)을 촬영하고, 그것을 나중에 편집하여 유튜브라는 채널에 그 영상을 보이도록 개재할 것(renderer) 이다.

기본적인 부분은 여기까지이다.

2탄에서 계속...