[withavatar] Demo를 만들며

github: withavatar 코드
demo: withavatar 데모
개발 일지: withavatar 노션

개발된 기능

1. 기본 뷰어
   
2. 모델 Wireframe
   
3. 모델 Bone 정보
   
4. 모델 morphtarget 정보
   

개발하면서 만난 오류

Camera 위치 조정

개발 예정인 Editor에서 똑같은 말을 할 것인데,
기존에 사용하는 BoundingBox가 잘못 설정된 경우에는 카메라가 엉뚱한 곳을 바라보기 때문에 업로드 할 때, 따로 설정해야 하도록 해야 해서 Editor를 개발하는 방향으로 해결할 예정이다.

zip 파일을 웹 상에서 압축 해제 후, 모델 URL 가져오기

JSZip 이라는 라이브러리를 활용해 압축을 했지만, 다시 해제해서 URL을 어떻게 구성해야 할지 전혀 예상하지 못했다.
압축한 파일을 불러올 방식에는 MIME 형식을 따라 그에 맞는 걸 제대로 써야 한다는 걸 알게 됐다.
Web에 보여줄 파일 포맷은 VRM, GLB이다.
이 두 파일의 공통점은 Binary 형식이라는 것이다.
이 점을 활용해 Blob화 시킨 후,
URL.createObjectURL()을 활용해 해결했다.

개발 예정 기능

Editor

3D 모델을 감싸고 있는 BoundingBox 라는 게 있다.
쉽게 말하면, 피규어를 감싸고 있는 박스라고 보면 된다.
이게 모델에 따라 정해져있는데, 모델에 비해 너무 작거나 너무 크거나 xyz 축이 맞지 않는 등 문제가 발생할 수 있기 때문에 BoundingBox로 카메라 위치를 조정하는 저로서는 두 가지 방법이 있습니다.

1. 다른 모델 정보를 찾아 카메라 자동 위치 정렬하기
2. 업로드할 때, 사람이 직접 모델이나 카메라 위치 조정하기

모델에 속한 다른 정보를 찾아봤지만, 모델이 Scene 어디에 어떻게 보이는지를 알 수 있는 방법이 제 지식으로는 없다는 결론이 나왔다.
그래서 2번을 따라가기로 하고, Editor를 만들 예정이다.

또한, FBX 파일을 올릴 시에는 모델이 텍스쳐를 갖고 있는 경우, 외부 텍스쳐 파일이 필요한 경우가 있어서 이또한 입힐 수 있도록 만들어야 하기 때문에 필요하다.

Shop

Sketchfab이나 Booth와 같은 방식으로 모델 DB를 구성해 만들 예정이다.
이 프로젝트의 최종 목적인 점이다.