如何在 aframe 中添加自定义加载屏幕以显示 aframe 场景的加载百分比（对于大型 gltf 模型）？

Question

我正在 aframe 0.8.2 中尝试这个，但任何版本都可以。

我尝试使用此处的解决方案

我想从 pace.js 添加类似 Center Circle/Center Atom 的内容，即 https://github.hubspot.com/pace/docs/welcome/

<!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>
     <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?v=1563255364433" 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>

Answer 1

如果您有多个模型，您可以使用 model-loaded 事件对它们进行计数。

如果您有一个大模型，并且想查看它加载了多少...那么它就很长了。据我所知 gtlf 加载进度被省略（源代码 here），因此您需要使用自定义版本的 gltf-model 组件 - 替换

}, undefined /* onProgress */, function gltfFailed (error) {

例如

}, function gltfProgress(xhr) {
   emit("model-progress", {progress: ( xhr.loaded / xhr.total * 100 ) })
}, function gltfFailed (error) {

并使用

检查更新

this.el.addEventListener("model-progress", e => {
  console.log(e.progress)
})

如何在 aframe 中添加自定义加载屏幕以显示 aframe 场景的加载百分比（对于大型 gltf 模型）？

how to add a custom loading screen in aframe to show how much percent of aframe scene is loaded (for big gltf models)?

aframe