Aframe將預加載器添加到圖像加載天空

我有一個場景，我正在使用我創建的「場景外」按鈕更改天空的src。目前一切正常，但我想在等待下一張圖片加載時顯示預加載器。Aframe將預加載器添加到圖像加載天空

在這裏你可以看到我的場景：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>

感謝您的幫助......

來源

2017-01-07 user1776729

我現在在一個資產加載圖像，但仍然希望預載圖片。 – user1776729

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使用）。這取決於你想要的是什麼。

來源

2017-01-08 03:06:25 ngokevin

我一直在嘗試，但仍然沒有運氣。從點擊按鈕到圖像開始加載的時間點之間似乎有延遲。然後，它突然加載。所以materialtextureloaded總是正確的。我想創建一個類似於這個網站上的加載器的效果：http://vrviewer.istaging.co/#!/57ecd104816dfa005668e914 請檢查我的開發測試網站上的鏈接鏈接：http://scriptstrainer.com/vr_training /以及上面的一個。謝謝 – user1776729

我有相同的場景，我想添加預加載器，並且只有當圖像顯示時，才能刪除預加載器。

我嘗試使用事件「加載」和「加載」，但沒有工作，因爲我發現圖像一旦完成加載後不顯示。

最終我得到的幫助來自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>

來源

2017-07-14 18:42:05 kassemEzz

Aframe將預加載器添加到圖像加載天空

回答

相關問題