Aframe Добавить Preloader для загрузки изображения в небо

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

У меня был такой же сценарий, когда я хотел добавить прелоадер и только когда изображение отображается, чтобы удалить предварительный загрузчик.

Я попытался использовать «load» и «загружен» событий, но не работал, так как я узнал, что изображения не отображаются после завершения загрузки.

В конце концов я получил помощь со страницы 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>