React 메타버스 웹앱 시리즈입니다.
- 메타버스 앱 - 1. 3D 파일 업로드
- 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점
- 메타버스 앱 - 3. 캐릭터
메타버스 앱에 캐릭터를 추가해 봅시다.
캐릭터 다루기는 좀 복잡한데, 먼저 간단한 소개 영상을 준비했어요.
캐릭터는 Character Creator 3를 사용해서 만들어 FBX로 export했어요. 준비된 FBX가 정상 동작하는지 먼저 three.js 에디터에서 테스트해 볼 텐데요, 에디터에서 File - Import - FBX를 선택합니다.
잘 로딩되는데, 머리카락이 좀 이상하네요. 속성 중에 Depth Write를 비활성화해 보면, 아래 스크린샷처럼 헤어가 제대로 나오네요.
헤어의 경우, Depth Write 말고도 Alpha Map이나 다른 속성을 조정해서 해결할 수도 있는데요, 아직 이 부분에 대해서 왜 그런지 확실하게 알지 못하니 지금은 일단 Depth Write로 넘어갑니다. 이런 속성 값들과 컴퓨터 그래픽스의 일반적인 내용을 차근차근 공부해 나가야겠죠.
Three.js 에디터에서 정상 로딩된다면 React 앱에서도 됩니다. 같은 라이브러리를 사용하니까요. 따라서, 만일 뭐가 잘못된 것 같으면 Three.js 에디터에서 잘 되는지 검증용으로 사용하면 좋습니다. 이제 React 메타버스 앱에서 캐릭터 FBX 파일을 로딩하고 머리카락도 제대로 바꾼 뒤 팔다리와 얼굴을 움직여 봅시다.
우선 기존 Metaverse 앱에 캐릭터 추가 코드를 구현하기 위해 아래와 같이 구조를 잡았습니다.
뷰어 밑에 기존 3D 가상월드가 있고 동등한 레벨에서 캐릭터 폴더가 있습니다. React는 뷰 관점에서 생각하는 것이 좋기 때문에 가상월드와 캐릭터 뷰를 나눴는데요, 가령 메타버스를 돌아다니다가 내 캐릭터를 바꾸고 싶을 때는 캐릭터 페이지 모드로 전환되는 것을 고려했어요.
'IT > 3D Web' 카테고리의 다른 글
| [3D Web] Character Creator 3 to Three.js (0) | 2021.08.05 |
|---|---|
| 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 (3) | 2021.07.01 |
| 메타버스 앱 - 1. 3D 파일 업로드 (2) | 2021.07.01 |
| Google TTS (0) | 2021.05.27 |
| React 3D 웹앱 - 4. 3D 뷰어 (0) | 2021.04.24 |