Using GLTF model that is retrieved from API in Aframe

Question

I want to use a GLTF file that is loaded from the GLTFloader of ThreeJS. I get the object back but AFrame doesnt show the object. I use the loader because I need to give a authorisation header with the GET request for the GLTF file.

        let loader = new GLTFLoader();
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderConfig({ type: 'js' });
        dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.4.0/");
        loader.setDRACOLoader( dracoLoader );
        loader.requestHeader = header;

        loader.load( url , async function( gltf ){

          let scene = document.querySelector('a-scene');
          let model = document.createElement('a-entity');

          model.setAttribute('position', '0 -8 -10');
          // model.setAttribute('gltf-model', `src: ${gltf.scene}`);
          model.setAttribute('rotation', '10 0 0');
          model.setAttribute('scale', '2 2 2');

          
          model.addEventListener('loaded', () => {
            model.object3D.add(gltf.scene);
            console.log(model)
          });
          scene.appendChild(model);
        });

It shows a model if I change the gltf-model attribute to a local path but it needs to use the gltf variable of the loader.

model.setAttribute('gltf-model', "./data/example.gltf);

Answer 1

          let xhr = new XMLHttpRequest();

          xhr.open('GET', url, true);
          xhr.onreadystatechange = handler;
          xhr.responseType = 'blob';
          xhr.setRequestHeader('Authorization', `Bearer ***`);
          xhr.send();

          function handler() {
            if (this.readyState === this.DONE) {
              if (this.status === 200) {

                let data_url = URL.createObjectURL(this.response);
                let scene = document.querySelector('a-scene');
                let model = document.createElement('a-entity');

                model.setAttribute('position', '0 -8 -10');
                model.setAttribute('rotation', '10 0 0');
  
                model.setAttribute('gltf-model', `url(${data_url})`);

                scene.appendChild(model);
              } 
            }