在AR.js中，当“加载模型”时，显示一个加载屏幕

问题描述：

当我们加载一个大型3D模型或一个视频时，需要花费一些时间来加载资产（资源）并渲染资源，所以我想显示一个加载屏幕或加载Gif文件或加载A盒-直到在屏幕上或图案上完成了全部资产的加载和渲染。请检查我的故障，它可以正常工作，但是加载和渲染需要10-15秒。

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>

显示 HIRO 模式会花10到15秒（取决于互联网速度）来加载和呈现。我想显示一些预加载器或加载屏幕或某些 Gif加载图像以显示直到对象（资产）完全加载，渲染和加载完成后才呈现和消失……

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

答

对于模型，您可以使用模型加载事件：

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>

#loadingEl 可能有一个带有正在加载图像的原始框，并且在加载模型时，您将其删除（实体或其可见性）：

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

小故障此处。

< a-assets> 系统中已发出

 $ c>事件，您也可以将其用于视频。
Glitch here.


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

在AR.js中，当“加载模型”时，显示一个加载屏幕

相关推荐