How to load .glb models in a-frame?

Question

I am trying to load .glb models in a-frame using the gltf-model component but I get the following error;

components:gltf-model:warn Unexpected token g in JSON at position 0

Based on the docs here and the discussion here I believe I am doing this correctly. Please see my code below.

  <a-scene>
      <a-assets>

        <a-asset-item 
          id="glbtestmodel"
          src="https://cdn.glitch.com/90a30469-f038-4054-be9c-fd1ec94a810d%2Fkitchentest.glb?1537178470645">
        </a-asset-item>

      </a-assets>

      <a-entity 
          id="glbtest"
          gltf-model="#glbtestmodel"
          position="0 1 -2">
      </a-entity>

    </a-scene>

Using a-frame 8.2

https://aframe.io/releases/0.8.2/aframe.min.js

And you can see a glitch of that here.

I use Vectary to export models, and gltf models exported from there always work using the same technique as expected.

As an alternative to exporting .glb from vectary, I have tried exporting the models as gltf and then converting them using suggested tools like this and this. The result is the same.

Every model that I export in whatever fashion, I check using this gltf-viewer tool and there are no errors. I have opened up the file and they are in 2.0 format as they should be.

In response to the error, I have also tried opening up the .glb file and modifying it removing the initial characters so that it matches the beginning of a gltf file but it just produces different errors.

Is this a known issue? Or am I doing something wrong?

The model in question is available via the above code example but here is a direct link for ease.

If you need any more information from me to help advise, please let me know.

Diego Marcos Diego Marcos · Accepted Answer · 2018-09-17T17:41:04

Use https://cdn.glitch.com/90a30469-f038-4054-be9c-fd1ec94a810d%2Fkitchentest.glb instead of https://cdn.glitch.com/90a30469-f038-4054-be9c-fd1ec94a810d%2Fkitchentest.glb?1537178470645. The loader uses the file extension to determine if the file is JSON (gltf) or binary (glb). The number confuses the parser and goes through the JSON path, that's why you get the components:gltf-model:warn Unexpected token g in JSON at position 0 message

How to load .glb models in a-frame?

1 Answers