three.js GLTF 리깅 컨트롤러 제작하기

 

https://web-rig-controller-evq8bitdc-webdoli.vercel.app/

 

 

 

three.js덕분에 3D 애니메이팅 분야가 상당히 넓어지고 있다. 

gltf, fbx 소스파일을 3D프로그램에서 제작한 이후, gltf 로더를 통해 Bone객체를 위와 같이 조작할 수 있으며, Theatre.js, GSAP같은 라이브러리를 통해 키프레임 방식의 애니메이팅도 가능하다. 단, (블랜더가 아닌)Maya 유저의 경우, gltf 사용에 제약이 따른다.(gltf 플러그인 설치해야 됨)

 

 

 

 

---

1 Maya2gltf 플러그인 설치

https://github.com/iimachines/Maya2glTF/releases

Releases · iimachines/Maya2glTF

 

maya2gltf 플러그인은 2024.1월 현재 2023 버전까지 지원한다. (.zip파일을 압축푼 이후, 윈도우 실행파일을 더블 클릭하는 것만으로 설치 가능) 

 

 

 

 

---

2 Maya 캐릭터 준비

rohan_maya_files.zip

3.51MB

 

 

 

테스트 결과, three.js에서 구현할 수 있는 캐릭터 리깅 구조는 딱히 정답이 없었다. root조인트가 캐릭터 밖에 있어도 상관없으며, 유일한 법칙은 아래와 같이 지오메트리(폴리곤)와 조인트를 밖에 분리시켜 둬야 한다는 점이다.

 

 

 

만일, 캐릭터의 조인트와 폴리곤이 그룹 내에 위치한다면, 위의 깃허브 코드가 실행되지 않는다. 왜냐하면, loader.js 파일에서 루프구문이 1단계로 이뤄져 있기 때문이다.

 

 

 

조인트 상위의 group이 1단계 증가할 때마다, for구문을 루프단계도 추가해야 코드가 실행된다.(loader.js의 루프구문 수정) 

 

 

 

 

---

3 텍스처 설정

gltf텍스처 설정에서 유의할 점은, '상하 반전'이다. maya2gltf 플러그인의 pbr쉐이더로 설정한 텍스처는 gltf로더에서 (상하)거꾸로 인식된다. 이를 해결하려면, three.js의 texture로더에서 uv설정을 수정하면 될 듯하다.(테스트 버전에서는 텍스처를 거꾸로 넣어서 진행)

 

 

 

 

경로를 설정한 이후, 모든 개체를 선택한 상태에서 export를 진행한다.

 

 

 

 

 

 

---

4 Code

간단한 컨트롤러 구조임에도 꽤 코드가 길어졌지만 핵심은 loader.js와 ctrl관련 파일이다.

 

 

https://github.com/webdoli/webRigController

GitHub - webdoli/webRigController

node.js같은 의존성 모듈이 없으므로 github에서 다운받은 후, index.html파일을 live server로 실행하면 즉시 결과를 볼 수 있다.