A-frame convert zip package into glb for sketch fab model

1
votes

I've been coding In A-frame recently and I've been using gltf models in my scene. I've been using tinkercad models because I can't figure out how to put sketchfab.com models in my code. When I download a model from sketchfab.com and press download as gltf, it gives me a zip folder. Inside the zip folder are 2 files and a folder. Scene.glf and scene.bin are the files and textures is the folder. I want to take this zip folder and turn it into a sole glb or gltf file. How would I accomplish this?

1
modelaframevirtual-realitygltf

1 Answers

1
votes

For others' context, Sketchfab returns something like...

  • model/scene.gltf
  • model/scene.bin
  • model/textures/diffuse.png
  • model/textures/normal.png

... where the scene.gltf file contains relative references to the other files. A-Frame can load all of those files given just the .gltf reference, as documented, as long as they're hosted in your project under a similar folder structure:

<a-gltf-model src="assets/model/scene.gltf"></a-gltf-model>

It's also common to combine the whole model into a self-contained (binary) .glb file, which is a "lossless" change and should not affect the content in any way if done by a correctly-implemented tool. Two easy options would be glTF-Pipeline or glTF-Transform. Example:

npm install --global @gltf-transform/cli

gltf-transform cp model/scene.gltf output.glb

Also see https://glb-packer.glitch.me/, but it may not work with certain files.

NOTICE: While it's technically possible to create a self-contained .gltf file, rather than .glb, don't do this. Embedding binary resources in a (JSON) .gltf file adds 20-30% to file size and reduces loading speed. The (binary) .glb format is more efficient here.