[ three.js ] three.js에 대해 알아보자.

참고 사이트

∙ seongminn님의 벨로그

 

 

현재 작성자는 그래픽 기반의 솔루션 회사에 재직중입니다.

threejs에 대해 공부중이라 완벽한 내용은 아니게 될지는 모르겠으나, 잘못된 내용이 기재되어 있을 경우 따끔한 피드백 주시면 겸허히 받아들이고 수정하겠습니다.

 

📦 three.js

three.js란, 웹페이지에 3D 객체를 쉽게 렌더링 할 수 있도록 도와주는 3D 라이브러리이다.

WebGL 기술을 기반으로 렌더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있도록 한다.

 

https://threejs.org/

Three.js – JavaScript 3D Library

 

🖋️ WebGL

인터넷 브라우저 환경에서 OpenGL을 플러그인 도움 없이 공식적으로 사용할 수 있도록 제정한 웹 그래픽스 API로, OpenGL ES를 기반으로 정의하고 있다.

 

 

---

 

🍕 기본 구성

 

🌎 Scene

3D 객체를 띄우기 위해 기본적으로 3D 공간이 필요한데 이 공간을 Scene이라 칭한다.

 

우리는 하나의 장면, Scene을 만든다.

 

🎥 Camera

물체를 바라보기 위한 요소이다. 우리가 눈으로 보듯 Scene이라는 공간에서 물체를 보고, 촬영하기 위해서는 Camera가 필요하다.

 

우리는 하나의 장면을 촬영하기 위해 Camera를 생성하여 촬영한다.

 

대표적으로,

원근법을 무시하는 Orthographic-Camera와,

사람의 눈과 같은 원근법을 이용한 Perspective-Camera가 존재한다.

 

매개변수로는 

∙ fov: 카메라의 시야각이다.

∙ aspect: 카메라의 촬영할 width, height의 비율이다 (width/height)

∙ near: 카메라로부터 설정된 값의 거리 안에 있는 물체는 보이지 않는다.

∙ far: 카메라로부터 설정된 값의 거리 밖에 있는 물체는 보이지 않는다.

 

우리는 가끔 게임을 하다가 캐릭터가 앞으로 걸어가면 점점 뒤에서 물체가 렌더링이 되면서 보이는 현상이 발생하는데 이때 사용되는 값이다.

 

 

🖋️ Renderer

Scene에 물체를 그려주기 위한 도구가 Renderer이다.

 

다음 게시글에서 이 세 가지를 사용하여 3D 공간을 만들어보자.