Using GLTF model that is retrieved from API in Aframe - three.js

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);
}
}