Question

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

我尝试添加资产加载管理器，但没有成功。我尝试了所有方法但没有成功

<!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秒（取决于Internet速度）。我想显示一些预加载器或加载屏幕，或者显示一些Gif Loading Image直到对象（资产）完全加载，渲染和加载完成后才呈现和消失……

预先感谢

Answer 1

对于模型，您可以使用model-loaded事件：

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

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

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

小故障here。

<a-assets>系统发出loaded事件，您也可以将其用于视频。

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

1 个答案: