# 3D 모델링과 좌표계 설계 그리고 최적화 (작성중)

### 개요

DOMS 프로젝트를 하면서 3D 모델링을 하기 위해 다뤘던 기술적인 내용들이다.

### WebGL 이란

<figure><img src="https://4041779068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvS5A5cEDGPy5hgfRhMS7%2Fuploads%2Fi71aWWmMq8FG2zpa0T23%2Fimage.png?alt=media&#x26;token=14ce1079-7ef1-48c8-9e68-2987cda93e61" alt=""><figcaption><p>WebGL</p></figcaption></figure>

[Web Graphics Library](https://developer.mozilla.org/ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) 의 약자로 2D 및 3D 를 렌더링 하기 위한 JavaScript API 이다. OpenGL ELS2.0 기반으로 HTML5 의 Canvas 위에 그려진다.

### Three.js

<figure><img src="https://4041779068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvS5A5cEDGPy5hgfRhMS7%2Fuploads%2F1UgGIuvgxQRWrn8uo13h%2Fimage.png?alt=media&#x26;token=63d0ea95-7697-474a-9e9e-11eb4f0122c6" alt=""><figcaption><p>three.js</p></figcaption></figure>

일반적인 웹개발자들이 쉽게 WebGL 을 활용할 수 있도록 친절히 [three.js](https://threejs.org) 라는 라이브러리를 만들어 놓았다. Three.js는 WebGL의 상위 레이어로, WebGL의 복잡한 API를 감싸서 더 사용하기 쉬운 API를 제공한다. 이를 통해 우리는 더 적은 코드로 강력한 3D 그래픽을 만들 수 있었다. Three.js는 내부적으로 WebGL을 사용하여 렌더링을 수행한다. WebGL 을 다루는 라이브러리는 three.js 말고도 여러가지가 있었지만, 우리는 Three.js 를 선택했다.

1. Babylon.js: 매우 강력한 3D 엔진으로, 게임 개발과 같은 복잡한 3D 어플리케이션을 만드는 데 적합하다. 물리 엔진, 애니메이션, 충돌 감지 등 다양한 기능을 제공한다.
2. PlayCanvas: 클라우드 기반의 3D 게임 엔진으로, 협업 기능이 뛰어나고 실시간으로 편집할 수 있는 기능을 제공한다. 상업적 프로젝트에 많이 사용됩니다.
3. A-Frame: Mozilla에서 개발한 웹 프레임워크로, 특히 VR(가상 현실) 콘텐츠 제작에 최적화되어 있다. HTML과 같은 간단한 태그를 사용하여 3D 장면을 정의할 수 있다.
4. PixiJS: 2D 렌더링에 중점을 둔 라이브러리지만, WebGL 기반으로 매우 빠르고 효율적이다. 2D 게임이나 애니메이션을 만들 때 많이 사용된다.

### Three.js 의 기본 구성 요소

<figure><img src="https://4041779068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvS5A5cEDGPy5hgfRhMS7%2Fuploads%2FylCBFzRJPXhGynID8KyV%2FUntitled.png?alt=media&#x26;token=02ff457d-7c34-4ede-bca8-481ac2cf9f48" alt=""><figcaption><p>three.js 의 기본 구성 요소</p></figcaption></figure>

<figure><img src="https://4041779068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvS5A5cEDGPy5hgfRhMS7%2Fuploads%2FT7xj9OcYUVDMYZEWLo5E%2Fimage.png?alt=media&#x26;token=11a338fa-cc61-43f9-aa17-6fea2d7784f8" alt=""><figcaption><p>threejs-structure</p></figcaption></figure>

three.js 는 3차원 객체로 구성되는 장면(Scene) 이 있고, 이 장면을 모니터와 같은 출력 장치에 출력할 수 있는, 즉 렌더링 할 수 있는 Renderer 가 있다. Scene 을 렌더링할 때는 어떤 시점에서 Scene 을 보는가에 따라 다양한 모습으로 렌더링 된다. 그 시점을 Camera 로 정의한다.

다시, Scene 은 Light 와 3차원 모델인 Mesh 로 구성된다. 3차원 형상이 화면 상에 표시되기 위해서는 적절한 광원이 필요하기 때문에, light 가 필요하다.&#x20;

그리고 이 mesh 는 object3D 의 파생 클래스인데, Mesh 는 형상 등을 정의하는 Geometry 와 색상 및 투명도를 정의하는 Material 로 정의된다.

보다 자세한 내용은 [fundamentals](https://threejs.org/manual/#en/fundamentals) 를 참조해서 보길 바란다.

### 카메라 설정하기

3D 환경에 View 를 구성하기 위해서는 우선 동적으로 움직일 수 있는 카메라를 설정해야만 했다.\
drei 의 [OrbitControls](https://drei.pmnd.rs/?path=/docs/controls-orbitcontrols--docs) 를 사용해서,&#x20;

<figure><img src="https://4041779068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvS5A5cEDGPy5hgfRhMS7%2Fuploads%2FcAagWKkdPNaKNjJIEO0t%2Fimage.png?alt=media&#x26;token=94ffa0eb-8b67-4a58-beac-171a8422e1db" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4041779068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvS5A5cEDGPy5hgfRhMS7%2Fuploads%2FHdiNO1ajOkflbDtpJyMP%2FUntitled%202.png?alt=media&#x26;token=a7a1bed2-39d8-4aa3-9209-1e516ff5857d" alt=""><figcaption></figcaption></figure>

### 라이브러리 분석

Three.js 는 3D 장면 생성부터 조명, 카메라, 텍스처, 애니메이션까지 쉽게 사용할 수 있다.

Scene : 3D 공간에서 오브젝트를 배치하는 기본 단위이다. 장면(Scene) 내에 여러 오브젝트, 카메라, 조명을 추가하여 전체 3D 를 구성한다.&#x20;

Camera : 사용자가 3D 를 어떻게 보는지에 대해 정의한다. PerspectiveCamera, OrthographicCamera 같은 다양한 카메라 유형을 지원한다.

Renderer : 씬을 카메라 관점에서 렌더링하는 역할을 한다. Three.js 의 WebGLRenderer 가 주로 사용되며, CanvasRenderer 등의 대체 렌더러도 존재한다.

Mesh : Geometry(모양)과 Material(표면 처리)로 구성된 기본 오브젝트이다. 다양한 기본 도형을 사용하거나 커스텀 모델을 만들어 Mesh 로 사용할 수 있다.&#x20;

Geometry : 3D 공간에서 오브젝트 모양을 정의하는 객체이. BoxGeometry, SphereGeomtry 등의 기본 도형이나 커스텀 Gemoetry 를 만들 수 있다.&#x20;

Material : 오브젝트 표면의 속성을 정의한다. 광택, 불투명도, 반사광 등 다양한 속성을 제공하며, MeshBasicMaterial, MeshStandardMaterial 과 같은 다양한 유형이 있다.<br>

Textrue : 오브젝트 표면에 적용할 이미지를 정의하며, 디테일을 더욱 사실적으로 표현할 수 있게 된다.&#x20;

조명과 그림자 : 여러 종류의 조을 제공하여 오브젝트와 장면을 사실적으로 표현할 있다. AmbientLight, DirectionalLight, PointLight 등을 사용하여 조명 효과를 구현.

### 3D 모델링 과정

### 좌표계 설계 과정

### 3D 최적화의 필요성
