javascriptaugmented-realityaframear.jsjsartoolkit

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 A-Box - Till The Whole Assets Loading And Rendering Is Done,On The Screen Or On The Pattern.Please Go Through My GLITCH , Its Working But It Will Take 10-15 Sec to load and render.

I tried To Add Asset Loading Manager But It didn't Worked . I Tried All The Ways But It Didn't Worked

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Hello!</title>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <script type="text/javascript" src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.min.js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>
      <script src="https://unpkg.com/aframe-animation-component@5.1.2/dist/aframe-animation-component.min.js"></script>
   </head>
   <body>
      <a-scene vr-mode-ui="enabled: false" artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 90;' arjs='debugUIEnabled: false;detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
         <a-assets>
            <a-entity src="https://cdn.glitch.com/a5ca03d3-3024-44dc-9256-0b75c4247613%2Fscene.gltf?v=1563255364433" id="model"></a-entity>
         </a-assets>
         <a-marker preset="hiro">
            <a-entity  gltf-model="#model" material='transparent:true;shader:flat;side:double;metelness:2' scale="0.04 0.04 0.04" ></a-entity>
         </a-marker>
         <a-entity camera></a-entity>
         <a-entity shadow="cast: true"></a-entity>
      </a-scene>
      <script>
         // Workaround for an AR.js bug (https://github.com/jeromeetienne/AR.js/issues/410)
         const sceneEl = document.querySelector('a-scene');
         sceneEl.addEventListener('loaded', () => {
           sceneEl.camera = new THREE.PerspectiveCamera();
           scene.add( camera );
         });
      </script>
   </body>
</html>

After Showing The HIRO Pattern Its Takes 10-15 Seconds (Depending Upon The Internet Speed) To Load And Render . I Want To Show Some Preloader Or Loading Screen Or Some Gif Loading Image To Display Till The Object (Assets) Loads Completely And Render And Disappear Once The Rendering And Loading Is Done......

Thanks In Advance

Solution

  • 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.