지금까지는 three.js에서 기본적으로 제공하는 도형을 가지고 작업을 해보았다. 이번에는 커스텀 모델을 three.js에서 활용하는 방법에 대해 배워보자
glTF(GL Transmission Format의 줄임말)은 3차원 장면과 모델을 표현하는 파일 포맷으로 JSON 표준에 기반한다. json 데이터에 각종 정보가 들어있고, 그것을 활용해 three.js에서 그려낼 수 있다.
다양한 포맷이 있지만 glTF이 제일 대표적인 포맷이다. glb는 glTF를 바이너리 데이터 자체로 가지고 있는데, 블랜더라는 프로그램으로 3D 모델을 만든 뒤 glTF의 바이너리 포맷인 glb를 활용해 three.js에서 그려본다.
먼저 gltf download라고 구글에 치면 다양한 글이 나온다. 사람들이 만들어놓은 모듈을 돈주고 구매하거나 무료로 사용할 수 있다. 하지만 간단하더라도 직접 만들어서 내가 원하는 파일을 사용해보는 것이 훨씬 활용도가 높으므로 직접 3D 모델링 프로그래밍도 살짝 배워본다.
블랜더에 대한 기본적인 기능을 배워본다. 다양한 3d 모델링 툴이 있지만 Blender 오픈소스 기반의 툴이다. 즉, 무료임.. 따라서 이 툴을 사용해서 배워본다.
블렌더를 실행시켜보면 이런 이미지가 가장 먼저 뜬다. 기본 시작형태임. 각종 패널에 대해 먼저 알아보자
좌측 화살표 방향의 버튼을 누르면 다양한 타입의 에디터로 사물을 볼 수 있는 설정 기능이 나온다. 기본은 3D Viewport이고 다양한 설정으로 화면을 볼 수 있다.
가장 기본적으로 패널을 추가하고 삭제하는 방법에 대해 알아본다.
마우스를 이동시켜 여백을 주면 추가 패널 생성, 추가된 여백 쪽으로 다시 드래그를 이동시키면 패널이 삭제되는 구조이다.
본격적으로 모델링을 해본다. 기본 3D Viewport에서 3D 모델링을 한다. 우선 트랙패드로 컨트롤 하는 방법에 대해 알아본다. (기본 트랜패드 사용하므로)
두 손가락으로 움직이기
Shift + 두 손가락으로 움직이기 = 시점 이동
