생각보다 쉬운 three.js :정의와 기본 구조.
Three.js
Three.js란 웹에 3D객체를 쉽게 렌더링하도록 도와주는 자바스크립트 3D 라이브러리입니다. WebGL과 비교한다면 WebGL은 2D/3D객체를 렌더링하는 일을 하고, Three.js은 어려운 WebGL을 3D 그래픽에 관련된 수학 지식들이 없이 직관적인 코드를 짤 수 있도록 도와주는 3D 라이브러리라고 할 수 있겠네요!
* SVG와 CSS를 통해 3D를 만들 수 있지만 매우 제한적이고 어렵습니다.
| 종류 | 하는 일 | 언어 | |
| WebGL | 레스터화 엔진 | 웹에서 2차원 그래픽과 인터랙티브 3차원 그래픽을 렌더링 | 자바스크립트 |
| Three.js | 3D 라이브러리 | 수학지식없이 WebGL을 사용하도록 도와주는 라이브러리 | 자바스크립트 |
* OpenGL 과 WebGL
OpenGL은 Open Graphics Library이며, WebGL의 원조라고 알아둡시다. C언어가 기반인 OpenGL을 웹상에서도 사용할 수 있도록 나온 것이 WebGL입니다.
Three.js의 기본 구조.
Three.js 에서 가장 기본이 되는 것은 3 가지.Renderer, Scene, Camera 입니다.
(당연하게도 3ds MAX 와 기본 개념이 비슷하네요.)
1. Scene이라는 3D 공간을 꾸미고,
2. 그 공간을 Camera라는 시점에서 바라보는 것.
3. 그 시점을 Renderer를 통해 HTML Canvas안에 렌더링하여 보여주는 것.
이게 전부입니다.
1. Renderer
Renderer는 Scene과 Camera 객체를 넘겨 받아 3D장면의 카메라가 바라보는 부분을 2D로 렌더링하는 일을 합니다.(3D 객체를 보는 거지만 결국 모니터라는 2D 환경에서 보니까요.) 기본적으로 WebGL을 사용합니다.
2. Scene
Scene은 크게 빛 Light와 3D객체인 Mesh 로 구성됩니다. 상단에 위치한 "Three.js 간략한 구조"라는 사진에는 자세히 안나와 있지만 Scene 하단에는 빛 Light와 Mesh 말고도 배경색, 안개 등 다양한 요소들이 트리형태로 묶여 있습니다. 이 트리를 통칭해 Scene graph라고 말하며, Scene을 Scene graph라고도 말하는 것이죠. 그래프 관점에서 본다면 Scene은 Scene graph의 최상위노드라고 표현할 수 있습니다. (그리고 여러 개의 Scene을 가질 수 있습니다. )
2.1 Light(광원)
현실세계에 한 곳을 집중시키는 스포트라이트, 은은한 분위기에 간접등이 존재하는 것처럼 Three.js 의 Light(광원)에도 다양한 광원을 제공합니다. - 주변광AmbientLight, 집중광SpotLight 등
2.2 Mesh(Object3D)
Mesh는 3D객체를 표현하며, Geometry(모양)와 Material(표면 속성)로 나눌 수 있습니다. 예를 들어 "초록색이고 투명도50%인 원뿔모양의 3D 객체를 만든다" 가정한다면, 초록색, 투명도50%라는 Material 과+ 원뿔이라는 형상 정의Geometry를 조합해 = 3D 객체인 Mesh가 만들어 지는 것입니다. 큰 특징으로 Material, GeoMetry는 재사용이 가능하여 여러개의 Mesh(3D객체)가 하나의 Material(표면 속성) 또는 GeoMetry(형상)를 동시에 참조할 수 있습니다.
2.2.1 Geometry (모양 )
구, 정육면체, 등등 형상을 정의하는 기하학 객체의 정점 데이터입니다. 기본적으로 Three.js 내에서 제공하는 내장 객체(구, 정육면체 등)를 통해 만들수도 있고, 파일을 통해 외부에서 가져와 만들 수 있습니다.
2.2.2 Material (표면 속성)
색상, 투명도, 질감등 기하학 객체를 그리는 데 사용하는 표면 속성을 의미합니다.
3. Camera :
영화의 장면, 장면은 사실 카메라로 촬영하는 시점이죠. 여러 카메라들 사이로 전환이 가능해 장면을 구성하는 것처럼 Three.js도 카메라 사이의 전환도 가능합니다. 또한 여러 종류의 카메라를 제공해 풍부한 연출이 가능합니다. 카메라의 3D 공간상 위치와 기타 설정값들을 조절할 수 있습니다. 여기서 주의할 점은 위 사진에 나와 있는 것처럼 Camera 는 Scene에 포함되지 않습니다. (근데 scene에 포함되기도 하더라구요? 조금 더 공부해봐야겠습니다. 큼큼)
출처