Question

我有一个场景，我正在使用我在“场景外”创建的按钮来更改天空的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>

感谢您的协助......

Answer 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中使用）。这取决于你想要的是什么。

Answer 2

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

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

最终我从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>

Aframe添加预加载器以在天空中加载图像

2 个答案: