Three.js

* 영어표기가 디폴트, 이하 한글표기

* Angular 기준

* 참고: https://ahnheejong.name/articles/my-first-octahedron/

---

0. Three.js ?

https://threejs.org/

3D 자바스크립트 라이브러리이며 WebGL 을 기반으로 구현됨.

 

0-1. 주요 구성요소

1). 공간: Scene

2). 피사체 : Mesh (부피: GeoMetry + 질감: Material)

3). 카메라(시점) : Camera

4). 빛: Light

5). 렌더러: Renderer

 

그림(인물화)으로 예를 들어보겠습니다.

---

1. 공간: Scene

- 그림을 그릴 캔버스

- 아무것도 그려지지 않은 종이

---

2. 피사체: Mesh

- 그림을 그릴 대상

- 인물화로 예를 들면 모델

- 피사체는 부피와 질감으로 구성된다.

- 3D의 기본원리에 따라, 기본 단위(삼각형) 들이 모여 한 면을 표현

  => 따라서 면(Face): Vector3(num_x, num_y, num_z), 여러개의 삼각형이 모여 한 면을 이룸.

  => 이렇게 될 경우 코드가 너무 복잡해지기 때문에 Three.js 에서 제공하는 형태를 사용

       (new THREE.OctahedronGeometry(RADIUS, 0);
       - 크기: Radius

       - 꼭지점 수: Detail

       - https://threejs.org/docs/#api/en/geometries/OctahedronGeometry

2-1). 부피: GeoMetry

        - 기하학적 형태

        - 뼈대, 모델의 골격

        - 정육면체를 예로 들면 정사각형의 높이

2-2). 질감: Meterial

        - 겉 껍데기, 가죽

---

3. 카메라(시점): Camera

- 그림을 보고있는 시점

- 카메라의 종류는 다양하지만 사람의 눈, 카메라 렌즈와 비슷하게 투영되는 PerspectiveCamera 를 기준으로 기술

3-1). 카메라의 시야 각: Field_Of_View

       - 수치가 클수록 넓은 시야 범위를 가짐. 단위: Degree

3-2). 시야의 가로, 세로 비: Aspect

       - 보통은 공간(컨테이너)와 동일하게 설정하는 것이 좋음. 단위: X

3-3). 렌더링 할 물체와 거리 하한값: Near

       - 물체와 카메라가 너무 가까이 있는 것을 방지

       - 하한값 미만은 화면에 표현되지 않으며 0보다 크고, Far보다 작은 값을 가질 수 있다.

3-4). 렌더링 할 물체와 거리 상한값: Far

       - 물체와 카메라가 너무 멀리 있는 것을 방지

       - 상한값 초과는 화면에 표현되지 않는다.

---

4. 빛: Light

- 어두운 밤에 아무것도 보이지 않듯, 빛이 없으면 피사체를 볼 수 없다.

- 좀 더 명확하게 표현하자면. 증명사진을 찍을 때를 떠올리자.

  너무 강한 빛에 노출된 부분은 입체감이 줄어듬.

- 혹은 석고상

- 색: Color

       - 말 그대로 색상

- 빛의 세기: InTensity

       - 위의 예시처럼, 너무 강한 빛이 들어가면 명도대비가 강해진다.

4-1). 공간 전체 밝기: AmbientLight

4-2). 특정 방향으로 빛 비추기: DirectionLight

4-3). 기본 광원: PointLight

---

5. 렌더러: Renderer

- 캔버스 위에 그려진 그림. 캔버스에 물감을 칠해서 만들어진 작품.

- Html 에 <div id="이름"> 으로 확보된 공간(Scene) 에 들어감

- 렌더러 행위를 통해. 만든 작품(자식) / 공간~캔버스, 컨테이너(부모) 개념

  => document 로 읽어온 공간에 appendChile 로 렌더된 작품을 이어서 접근

---

근데 왜 안되지