CODEWITHSUNDEEP
javascriptaugmented-realityaframear.jsjsartoolkit
Aryan
Aryan

Reputation: 83

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/[email protected]/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

Upvotes: 0

Views: 3312

Answers (2)

ByOSMA
ByOSMA

Reputation: 11

This is a fix for Aryan's glitch, use the Hiro marker and your 3d model - Glitch

<!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/[email protected]/dist/aframe-animation-component.min.js"></script>
     <script>
     AFRAME.registerComponent('loader', {
       init: function() {
         let loader = document.querySelector("#loadingEl")
         this.el.addEventListener('model-loaded', e => {
           console.log('loaded')
           loader.setAttribute("visible", "false")
         })
       }
     })
     </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" id="model"></a-entity>
         </a-assets>
         <a-marker preset="hiro">
            <a-box id="loadingEl"></a-box>
            <a-entity gltf-model="#model" material='transparent:true;shader:flat;side:double;metelness:2' scale="0.04 0.04 0.04" loader></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>

Upvotes: 0

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14655

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.

Upvotes: 1

Related Questions