Aframe 使用a帧设置加载动画

我正在使用a-frame加载全景照片，示例代码如下。在加载照片时，它会显示一个白色屏幕，并且会持续几秒钟，这会造成糟糕的用户体验。我想在加载照片时添加加载动画，但找不到任何有用的指南。有人能帮忙吗

---

我可以为您指出正确的方向。总的来说；首先，在加载所有内容时创建要显示的内容；然后在它加载后隐藏它，或者做任何你想做的事情

例如，创建一个具有大z索引的全屏div，它可以显示一些加载程序动画。然后使用javascript（普通方式或A-Frame推荐方式（为其构建组件））隐藏div

window.onload = function() {
  /* hide loading div */
}

---

事件在加载整个页面（包括图像）后被触发，这正是您所需要的。

我可以为您指出正确的方向。总的来说；首先，在加载所有内容时创建要显示的内容；然后在它加载后隐藏它，或者做任何你想做的事情

例如，创建一个具有大z索引的全屏div，它可以显示一些加载程序动画。然后使用javascript（普通方式或A-Frame推荐方式（为其构建组件））隐藏div

window.onload = function() {
  /* hide loading div */
}

---

事件在加载整个页面（包括图像）后被触发，这正是您所需要的。

我认为第8帧将有一个内置的加载屏幕。同时，以下是我目前如何处理从Ottifox导出的帧场景：

首先，在

a-scene

标记之前和主体开始之后，我有以下标记：

<div id="splash">
  <div class="loading"></div>
</div>

最后是main.js

document.addEventListener('DOMContentLoaded', function() {
    var scene = document.querySelector('a-scene');
    var splash = document.querySelector('#splash');
    scene.addEventListener('loaded', function (e) {
        splash.style.display = 'none';
    });
});

您可以在此处查看示例的源代码，以便一起查看：

---

我认为第8帧将有一个内置的加载屏幕。同时，以下是我目前如何处理从Ottifox导出的帧场景：

首先，在

a-scene

标记之前和主体开始之后，我有以下标记：

<div id="splash">
  <div class="loading"></div>
</div>

最后是main.js

document.addEventListener('DOMContentLoaded', function() {
    var scene = document.querySelector('a-scene');
    var splash = document.querySelector('#splash');
    scene.addEventListener('loaded', function (e) {
        splash.style.display = 'none';
    });
});

您可以在此处查看示例的源代码，以便一起查看：

---

我使用此选项进行了测试，但结果不稳定。onload功能有时没有激活。你能举个例子吗？@Hank它似乎比监听

loaded

事件更有效。查看日志：window.onload和a-frame的

loaded

事件，我使用了10k x 3k图像，因此它可以加载使用此选项测试的secI，但结果不稳定。onload功能有时没有激活。你能举个例子吗？@Hank它似乎比监听

loaded

事件更有效。查看日志：window.onload和a-frame的

load

事件，我使用了一个10k x 3k的图像，因此它可以加载一个secGreat to hear！欢迎。这个例子太棒了。你有一个百分比上升的版本吗？很高兴听到！欢迎。这个例子太棒了。你们有一个百分比上升的版本吗？