[Next.js,TS,Three] 나의 3D캐릭터Three.js에 표출하기 - 개인기록

목차

 

 

 사전 작업

https://www.youtube.com/watch?v=1ZDjzJm3vPY&t=182s

프로필용 캐릭터를만드는 방법은 위 유튜브에 적혀있다.

언급된건 4개지만 사용하는건 PPM을제외한 아래 3개 사이트이다.

• Profile Pic Maker ⇢ https://pfpmaker.com/
• Ready Player Me ⇢ https://readyplayer.me/
• Blender ⇢ https://www.blender.org/download/
• Mixamo ⇢ https://www.mixamo.com/#/

아바타 만들기

위 유튜브를 참고해서 위 링크중 Ready Player Me 에서 아바타를 만들어서 .glb 형식으로 다운로드 해준다.

 

Blender 다루기

당시 blender 최신버전인 4.1버전을 다운로드하였다.

 glb파일 불러오기

위 사진처럼 하여 다운로드한 glb파일을 가져온다.

 

 텍스처 보이게 설정 및 필요없는 부분제거

1. 처음엔 그냥 import할경우 아무세팅이 되어있지않으면 우측 에서 좌측 빨간동그라미가 클릭이되어있지않아 텍스처가 보이지 않을 것이다.
   1. 그땐 세번째를 클릭해줘서 텍스처를 클릭해준다.
2. 빨간동그라미중 우측인 glTF_not_exported는 delete로 삭제해준다.
   1. 해당 부분을 삭제하지않으면 fbx로만들때 이상한 구가 생긴다.
   2. 우리가 필요한건 Armature다.

 

블렌더 파일 저장 및 사전 처리(중요)

매우 중요한 내용인데 해당 부분이 안되어서 자꾸 애를먹었으나 위 댓글을 보고 해결하였다.

댓글의 내용은 다음과 같다.

 

fbx로 export하기

• File - Export - FBX를 클릭하면 위처럼 창이 나온다.
• 빨간 동그라미쳐진 Path Mode Copy에 우측 아이콘을클릭해 파란색으로 불 들어오게 하면 export FBX해도 텍스처가 적용된다.

Mixmamo에서 애니메이션 다운로드하기

• Mixamo ⇢ https://www.mixamo.com/#/

Mixamo

해당 홈페이지에 회원가입을하고 들어가면

Animations가있다.

 

 Fbx파일 불러오기

UPLOAD CHARACTER로 Blender에서 내보낸 fbx파일을 가져와 애니메이션에 입혀 사용할 수 있다.

 

다운로드

원하는 애니메이션을 찾았다면 우측상단의 download를 통해 다운로드하면 된다.

 

Blender로 다시 glb로 export하기

만든 fbx는 다시 glb로 바꾸어야한다. 그 이유는 three.js에 표출할때 glb를 사용할 것이기 때문이다.

 

Blender에 다시 mixamo에서 export한 fbx 파일을 import한 후glb로 export하면 된다.

 

 완료된 모습

이번글은 모델을가지고 애니메이션까지만 적용을 한것이므로 three.js로의 표현은 다루지 않았다.