파일 하나 여는 게 이렇게 복잡합니다

GLTFLoader.load('model.glb') 한 줄이면 3D 모델이 열릴 것 같지만, 현실은 다릅니다.

GLTF는 분리된 포맷

GLTF는 하나의 파일이 아닙니다.

model.gltf     ← JSON (구조 정보)
model.bin      ← Binary (실제 3D 데이터)
texture.png    ← 텍스처 이미지

.gltf 파일 안에서 .bin과 텍스처를 상대 경로로 참조합니다. 서버에서 로딩할 때는 괜찮지만, 사용자가 파일을 드래그 앤 드롭하면 문제가 생깁니다.

File API로 받은 파일에는 서버 경로가 없어서, .gltf가 참조하는 .bin 파일을 찾을 수 없습니다.

model.gltf를 업로드하면 같은 이름의 .bin과 텍스처를 자동으로 매칭합니다.

File 객체를 브라우저가 이해할 수 있는 임시 URL로 변환하여 상대 경로 문제를 해결합니다.

File 객체 → blob:http://localhost:5173/3a4b5c6d...
GLTF JSON 내 "model.bin" → Blob URL로 교체

대용량 모델 여러 개를 동시에 열어도 최대 6개씩만 로딩하여 브라우저 과부하를 방지합니다.

로딩이 끝나면 Scene 추가, 트리 구조 등록, 애니메이션 연결까지 한 번에 처리합니다.

파일 드롭 → 파일 그룹 매칭 → Blob URL 변환 → 로딩
  → Scene 추가 → SceneGraph 등록 → Animation 연결

이전 직장에서 3D 뷰어의 파일 로딩 시스템을 구현하면서 이 문제를 처음 마주했습니다. 오픈소스 3dviewer.net에서도 같은 문제를 다른 방식으로 풀고 있었고, 두 프로젝트의 접근법을 비교하면서 Voxel3D만의 방식을 설계했습니다.

겉으로 보면 파일 열기 버튼 하나지만, 그 뒤에서는 꽤 많은 일이 일어나고 있습니다.