three.jsaframear.js

Using GLTF model that is retrieved from API in Aframe


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

Solution

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