Opening a single file is more complex than you'd think

GLTFLoader.load('model.glb') — one line, and the 3D model should appear, right? Not quite.

GLTF is a split format

GLTF is not a single file.

model.gltf     ← JSON (structure)
model.bin      ← Binary (actual 3D data)
texture.png    ← Texture image

The .gltf file references .bin and textures through relative paths. Loading from a server works fine. But when a user drags and drops files, things break.

Files from the File API have no server path, so the .gltf can't find the .bin it references.

How Voxel3D solves this

1. Auto-detection

When model.gltf is uploaded, related .bin and texture files are automatically matched by name.

2. Blob URL conversion

File objects are converted into temporary browser URLs, resolving the relative path problem.

File object → blob:http://localhost:5173/3a4b5c6d...
"model.bin" in GLTF JSON → replaced with Blob URL

3. Concurrency control

Even when opening multiple large models at once, only 6 load simultaneously to prevent browser overload.

4. Auto-wiring

Once loaded, the model is automatically added to the Scene, registered in the tree structure, and animations are connected.

File drop → File group matching → Blob URL conversion → Loading
  → Scene add → SceneGraph registration → Animation connection

Inspiration

I first encountered this problem while building a file loading system for a 3D viewer at my previous job. The open-source project 3dviewer.net tackles the same issue differently. Comparing both approaches helped me design Voxel3D's own solution.

It looks like a simple "Open File" button, but there's quite a lot happening behind it.