In AR.js When Load Model ,Show A Loading Screen

When We Load A Big 3D Model Or Big A Video, It Takes Time To Load The Assets(Resources) And Render The Resources,So I Want To Show A Loading Screen Or Loading Gif File or a Loading

Solution 1:

For models, you can use the model-loaded event:

<a-marker preset="hiro">
   <a-entity id='loadingEl'></a-entity>
   <a-entity gltf-model="#model"></a-entity>
</a-marker>

---

The #loadingEl could have a primitive box with a "loading" image, and when the model is loaded, you remove (the entity or its visibility):

AFRAME.registerComponent('foo', {
   init: function() {
      this.el.addEventListener('model-loaded', e => {
          document.querySelector("#loadingEl").remove()
      })
   }
})

Glitch here.

---

The <a-assets> system have a loaded event emitted, you could use it for videos as well.