Aframe dynamic importing of gltf file

Question

So I have a simply gltf file and i would like to import it with a-frame during runtime.

I already tried to convert the gltf string to a URL and load it, however this gives a components:gltf-model:warn Cannot read properties of undefined (reading '0') warning. This is the code i tried:

<a-scene>
  <a-entity id="entity" position="0 2 -5"></a-entity>
</a-scene>

<script>
  const gltfString = `{"cacessors":[{"bufferView":0,"byteOffset":0,"count":3,"componentType":5126,"extras":{},"type":"VEC3","min":[-0.5,-0.5,0.0],"max":[0.5,0.5,0.0]},{"bufferView":0,"byteOffset":12,"count":3,"componentType":5126,"extras":{},"type":"VEC3"}],"asset":{"extras":{},"version":"2.0"},"buffers":[{"byteLength":72,"uri":"data:application/octet-stream;base64,AAAAAAAAAD8AAAAAAACAPwAAAAAAAAAAAAAAvwAAAL8AAAAAAAAAAAAAgD8AAAAAAAAAPwAAAL8AAAAAAAAAAAAAAAAAAIA/","extras":{}}],"bufferViews":[{"buffer":0,"byteLength":72,"byteStride":24,"target":34962,"extras":{}}],"extras":{},"meshes":[{"extras":{},"primitives":[{"attributes":{"POSITION":0,"COLOR_0":1},"extras":{}}]}],"nodes":[{"extras":{},"mesh":0}],"scenes":[{"extras":{},"nodes":[0]}]}`;
  const gltfBlob = new Blob([gltfString]); // convert string to blob
  const gltfUrl = URL.createObjectURL(gltfBlob, {type: "text/plain"}); // blob to URL

  document.addEventListener('DOMContentLoaded', function (event) {
    const entity = document.querySelector('#entity');
        
    console.log(entity) // blob:http://localhost:5500/4efe2c0d-5568-4928-8820-2e686b5b0c2a

    bruhEntity.setAttribute('gltf-model', `url(${gltfUrl})`);
  });
</script>

What would be the way to achieve this?

This is my glitch project

Answer 1

There was a typo in the string, here's a simple way to find out whats wrong:

• Save the buffer in a file test.gltf.
• Throw it into the gltf-viewer
• Find out there is a typo (from the error this.json.accessors is undefined)
• change cacessors to accessors
• voila:

const gltfString = `{"accessors":[{"bufferView":0,"byteOffset":0,"count":3,"componentType":5126,"extras":{},"type":"VEC3","min":[-0.5,-0.5,0.0],"max":[0.5,0.5,0.0]},{"bufferView":0,"byteOffset":12,"count":3,"componentType":5126,"extras":{},"type":"VEC3"}],"asset":{"extras":{},"version":"2.0"},"buffers":[{"byteLength":72,"uri":"data:application/octet-stream;base64,AAAAAAAAAD8AAAAAAACAPwAAAAAAAAAAAAAAvwAAAL8AAAAAAAAAAAAAgD8AAAAAAAAAPwAAAL8AAAAAAAAAAAAAAAAAAIA/","extras":{}}],"bufferViews":[{"buffer":0,"byteLength":72,"byteStride":24,"target":34962,"extras":{}}],"extras":{},"meshes":[{"extras":{},"primitives":[{"attributes":{"POSITION":0,"COLOR_0":1},"extras":{}}]}],"nodes":[{"extras":{},"mesh":0}],"scenes":[{"extras":{},"nodes":[0]}]}`;

const gltfBlob = new Blob([gltfString], {
  type: "text/plain"
}); // convert string to blob
const gltfUrl = URL.createObjectURL(gltfBlob, ); // blob to URL

const entity = document.querySelector('#entity');
entity.setAttribute('gltf-model', `url(${gltfUrl})`);

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<a-scene renderer="colorManagement: true">
  <a-light position="0 2 -1.9" intensity=10 type="point"></a-light>
  <a-entity id="entity" position="0 2 -2"></a-entity>
</a-scene>