文章/答案/技术大牛

发布

社区首页 >问答首页 >在Aframe AR.js中显示预加载屏幕，直到所有资产加载并呈现

问在Aframe AR.js中显示预加载屏幕，直到所有资产加载并呈现
EN

Stack Overflow用户

提问于 2019-07-30 08:14:17

回答 1查看 2.1K关注 0票数 5

我想显示一个预装屏幕，直到所有资产加载和呈现。

我尝试使用已加载的Assets，但它不起作用。当我们增加3d模型，图像和视频，所以这些资产几乎是50-60mb。因此，加载资产和增加资产需要时间。当我们增加4-8秒的视频时，黑屏幕出现并播放，如果网络速度慢(在检查网络选项卡中选择3G慢速我们测试)。请编辑我在小故障中的代码

<!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("vidhandler", {
              init: function () {
                // Set up initial state and variables.
                this.toggle = false;
                this.vid = document.querySelector("#vid");
                this.vid.pause();
                console.log('************* Vid Paused');
              },
              tick: function () {
                if (this.el.object3D.visible == true) {
                  if (!this.toggle) {
                    this.toggle = true;
                    this.vid.play();
                    console.log('************* Vid Play');
                  }
                } else {
                  this.toggle = false;
                  this.vid.pause();
                  //console.log('************* Vid Paused');
                }
              }
             });    
          </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;'>
             <!--  ALL  ASSETS  -->
             <a-assets>
        <!--   3D MODEL -->
                <a-entity  id="model" src="https://cdn.glitch.com/c3106e6c-98cb-40e4-b0c1-85257680d25a%2Fygark.glb?v=1564472468760" crossorigin="anonymous" rotation="-90 0 -90">
                </a-entity>
        <!--   VIDEO -->
                <video preload="auto" id="vid" response-type="arraybuffer" loop="false" crossorigin webkit-playsinline playsinline controls>
                   <source src="https://cdn.glitch.com/c3106e6c-98cb-40e4-b0c1-85257680d25a%2Fvid.mp4?v=1564472320471" type="video/mp4">
                </video>
        <!--   IMAGE -->
                <img id="img" src="https://cdn.glitch.com/c3106e6c-98cb-40e4-b0c1-85257680d25a%2Fsun.png?v=1564472507237">
             </a-assets>
             <!--  ALL  ASSETS  -->
             <a-marker type="pattern" preset="hiro" vidhandler>
                <a-entity position="0 0 0">
                   <a-video width="2" height="2" rotation="-90 0 0" material='transparent:true;shader:flat;side:double;src:#vid'></a-video>
                </a-entity>
                <a-image width="2" height="2" material='transparent:true;shader:flat;side:double;src:#img' position="2 0 0" rotation="-90 0 0"></a-image>
                <a-entity position="-1.5 0 0" gltf-model="#model"  material='transparent:true;shader:flat;side:double;metelness:2' rotation="0 0 0" scale="0.5 0.5 0.5"  shadow="receive: false"  >
                </a-entity>
             </a-marker>
             <a-entity camera>
                <a-entity cursor="rayOrigin: mouse;fuse: false;"></a-entity>
             </a-entity>
          </a-scene>
       </body>
    </html>

资产加载事件不起作用。请编辑我在小故障中的代码

提前谢谢

aframe

ar.js

jsartoolkit

javascript

augmented-reality

回答 1

Stack Overflow用户

发布于 2019-08-21 00:34:51

有几种不同的选择。

在Aframe有一个内置的加载屏幕声明中启用的<a-scene>

<a-scene loading-screen="dotsColor: red; backgroundColor: black"></a-scene>

另一个选项是遵循Noam Almosnino的答复中的步骤
使用像帧预装载机这样的组件:我没有与这个组件相关联，也没有对它进行测试。请有关一些示例，请参阅演示页面。

更新

基于您的评论(以下)，我推荐#2 (上文)

为场景加载的事件创建一个侦听器

document.addEventListener('DOMContentLoaded', function() {
    var scene = document.querySelector('a-scene');
    scene.addEventListener('loaded', function (e) {
        // hide splash screen
    });
});

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57267149

复制

相似问题

问在Aframe AR.js中显示预加载屏幕，直到所有资产加载并呈现
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Aframe AR.js中显示预加载屏幕，直到所有资产加载并呈现EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Aframe AR.js中显示预加载屏幕，直到所有资产加载并呈现
EN