3D 모델 회전 GIF·동영상 만들기

3D 모델을 돌아가는 GIF·동영상으로 보여 줘요

3D 프린팅 모델을 판매하거나 공유할 때, 사진 한 장보다 한 바퀴 돌아가는 미리보기가 훨씬 잘 보여요. 3D 파일을 넣으면 위쪽 화면에 모델이 나오고, 손가락이나 마우스로 돌려 보며 모양을 확인할 수 있어요. ‘GIF 만들기’는 블로그·메신저 어디서나 재생되는 움직이는 그림을, ‘동영상 만들기’는 더 선명하고 용량이 작은 MP4(H.264) 영상을 만들어요. 브라우저가 MP4 인코딩을 지원하지 않으면 WebM으로 만들고 알려 줘요.

설정

• 프레임 수·한 바퀴 시간: 36프레임에 4초면 초당 9프레임이에요. 부드럽게 하려면 프레임을 늘리고, GIF 용량을 줄이려면 크기와 프레임을 줄이세요. 동영상은 최소 6초 정도가 되도록 바퀴 수를 반복해요.
• 내려다보는 각도: 0°는 옆에서 수평으로, 25~35°는 제품 사진처럼 살짝 위에서 내려다본 모습이에요.
• 배경: ‘투명’은 PNG 썸네일에만 적용돼요. GIF와 동영상은 투명을 지원하지 않아 흰색으로 만들어요.
• Z축이 위: STL 같은 3D 프린팅 파일은 보통 Z축이 위라서 자동으로 켜져요. 모델이 누워 보이면 끄거나 켜 보세요.

썸네일

‘지금 각도 PNG’는 위 화면에서 돌려 둔 방향 그대로 1024px 이상 고화질 이미지를 만들어요(모델이 꽉 차게 자동으로 맞춰요). ‘4방향 썸네일’은 앞·오른쪽·뒤·왼쪽에서 본 그림 네 장을 한 장에 모아요. GLB·glTF는 원래 재질과 텍스처 그대로 그리고, 색 정보가 없는 STL·OBJ·PLY는 고른 모델 색으로 칠해요.

모든 그림은 이 기기의 브라우저 안에서 three.js(MIT)로 그리고, GIF는 gifenc(MIT), MP4는 브라우저 내장 인코더(WebCodecs)와 mp4-muxer(MIT)로 만들어요. 파일은 서버로 올라가지 않아요.

참고한 자료

• three.js (MIT)
• gifenc (MIT)
• WebCodecs API (MDN)
• mp4-muxer (MIT)