Aframe 添加预加载器到天空中的图像加载答案

【问题标题】：Aframe Add Preloader to image loading in skyAframe 添加预加载器到天空中的图像加载
【发布时间】：2017-01-07 08:36:57
【问题描述】：

我有一个场景，我正在使用我在“场景外”创建的按钮更改天空的 src。目前一切正常，但我想在等待下一张图片加载时显示一个预加载器。

在这里你可以看到我的场景：http://scriptstrainer.com/vr_training/

下面我提供了一些我的代码：

<a-scene>
<a-sky src="images/0-1.jpg" id="img-src">
</a-scene>
<div>
    <a href="#" id="button1"><img src="images/t1.png"></a>
</div>
<div>
    <a href="#" id="button2"><img src="images/t2.png"></a>
</div>
<div>
  <a href="#" id="button3"><img src="images/t3.png"></a>
</div>
<script>
var sky = document.querySelector('#img-src');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');
button1.addEventListener('click', function() {
sky.setAttribute('src', 'images/0-1.jpg');
});
button2.addEventListener('click', function() {
sky.setAttribute('src', 'images/2.JPG');
});
button3.addEventListener('click', function() {
sky.setAttribute('src', 'images/3.JPG');
});   
</script>

感谢您的帮助...

【问题讨论】：

我现在正在将图像加载到 a-assets 中，但仍需要预加载器图形。

标签： preloader aframe

【解决方案1】：

https://aframe.io/docs/0.4.0/components/material.html#events_materialtextureloaded

有一个事件materialtextureloaded 可以用来检测纹理何时加载到网格上。在您请求设置纹理的时间和设置纹理的时间之间，您可以显示加载图形。

button1.addEventListener('click', function() {
  sky.setAttribute('src', 'images/0-1.jpg');
  // Display something in the meantime.
  sky.addEventListener('materialtextureloaded', function () {
    // Small timeout just in case?
    setTimeout(function () { // Remove the placeholder. }, 100);
  });
});

加载图形可以像场景中的旋转对象，摄像机周围淡入淡出的黑色蒙版（如https://github.com/aframevr/360-image-gallery-boilerplate 中使用的那样）。这取决于你想要它是什么。

【讨论】：

我一直在尝试，但仍然没有运气。从单击按钮到开始加载图像之间似乎存在延迟。然后，它突然加载。所以加载的材质纹理总是正确的。我想在这个站点上创建一个类似于加载器的效果：vrviewer.istaging.co/#!/57ecd104816dfa005668e914 请检查我的开发测试站点上的链接链接：scriptstrainer.com/vr_training 以及上面的链接。谢谢

【解决方案2】：

我有同样的场景，我想添加一个预加载器，并且只有在显示图像时，才能删除预加载器。

我尝试使用事件 'load' 和 'loaded' 但没有奏效，因为我发现图像一旦完成加载就不会显示。

最终我从 AFrame GitHub 页面获得了帮助，我就是这样做的：

<a-assets>
  <img id='img-src' src='image.jpg'/>
</a-assets>
<a-sky src='#img-src' id='sky-id'></a-sky>

<script type='text/javascript'>
  var skyEl = document.querySelector('#sky-id');
  function loaded()
  {
    var preloader = document.querySelector('#preloader');
    preloader.style.display = "none";
  }

  skyEl.addEventListener('materialtextureloaded', loaded);
</script>

【讨论】：