如何在框架中添加自定义加载屏幕以显示框架场景的加载百分比(对于大型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 0.8.2中尝试此操作，但是任何版本都可以。

我在这里尝试在AR.js中使用解决方案加载模型时，显示加载屏幕

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
   <head>
      Hello!
      <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 type="text/javascript" src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.min.js">
      <script type="text/javascript" src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js">
      <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js">
     
     AFRAME.registerComponent('loader', {
       init: function() {
         let loader = document.querySelector("#loadingEl")
         this.el.addEventListener('model-loaded', e => {
           console.log('loaded')
           loader.setAttribute("visible","false")
         })
       }
     })
     
   </head>
   <body>
     
         
            </a-entity>
         </a-assets>
         
            </a-box>
            </a-entity>
         </a-marker>
         </a-entity>
         </a-entity>
      </a-scene>
     
         // 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 );
         });
     
   </body>
</html>

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

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

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

带有，例如

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

，并使用

检查更新

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