glb파일 관련

Three.js로 시작하는 3D 인터랙티브 웹

플레이어 만들기

23.03.12 16:07 작성

943

수정됨

구글에서 다운 받을 수 있는 glb모델들 중 일부는 처음 새로고침시에는 멀쩡히 서있지만, 걸어다니는 애니메이션을 적용시킬 경우 갑자기 캐틱터가 지평선을 바라보지 않고, 땅바닥을 바라보는? 그런 형태로 바뀌는 경우가 많습니다. 혹시 이 부분은 무엇을 고쳐야 하는 걸까요? (다운 받은 파일은 모두 애니메이션 여러가지를 가지고 있는 경우입니다). 한두개가 아니라 한 열개 정도를 받으면 7,8개에서는 이런 현상이 발생합니다.

blender 인터랙티브-웹 three.js

답변 1

acts

2023. 03. 13. 11:59

해당 현상은 coordinate system과 연관이 있어 보입니다.

three.js 에서 사용하는 좌표 체계만 알고 있어도 개발에는 문제가 없지만, 제작된 3D model 들을 받아와서 사용할 때는 다른 프로그램들의 좌표 체계도 알고 있으면 도움이 됩니다.

크게 y-up과 z-up 방식이 있습니다. 이는 Y축을 상하 좌표계로 쓰는지, Z축을 상하 좌표계로 쓰는지의 차이입니다.

three.js 와 Unity 등은 y-up 좌표계를 따릅니다.
Unreal Engine, 3ds Max, Maya 등은 z-up 좌표계를 따릅니다.

아마 질문자님께서 받아오신 모델이 z-up 좌표계를 따르는 모델일 가능성이 큽니다. 저희가 배우는 three.js에서는 y축이 수직, z축이 수평을 담당합니다. 모델이 누워있는 이유가 이것입니다.

이 이슈를 해결하려면 아래의 두 가지 방법이 있습니다 :

직접 모델을 회전시켜서 똑바로 세워둔다
해당 모델을 y-up 좌표계를 따르는 3D프로그램에서 glb로 export하여 사용한다.

fruitpigfoot

질문자

2023. 03. 13. 23:29

답변 감사합니다. 말하신대로 블렌더에서 다시 익스포트시 축 설정을 바꿔서 하면 바로 해결될 줄 알았는데, 이 방법으로는 해결이 되지 않았습니다. 더하는 방법으로는 더한 값이 축에 계속 반영되는게 아니라 매번 초기화 되는거 같은데 제가 제대로 설정을 못하고 있는 것 같습니다. 아래 캐릭터 glb로 받고 원래 강의 코드에서 player import 부분에 적용해보시고 확인 한 번 해보실래요?

https://sketchfab.com/3d-models/majd-the-boy-3ee158cbf94a49789c4a3c3e9df78917

인프런 커뮤니티 질문&답변

glb파일 관련