I'm working on a simple script to show 360 images in VR, while changing the image dynamically. For the moment, the next-image source is set by a simple timeout (amongst 4 local .jpg), but I'm planning to GET images from a remote camera, and then update the a-sky view every x seconds.
I was able to change the a-sky src attribute and set a different n.jpg. But I wasn't able to set a blob as source.
For now I'm just converting a local jpg to a blob but the next step is to ask the remote camera api to have the jpg binary, and convert it to a blob url. Anyway, the new image is not shown. It seems to be working only when you have a static content as src.
How can I do? Thanks
Here part of the source:
setInterval(updatePanImg, 2000);
var seq = 1;
function updatePanImg() {
let blob_src;
if (seq >= 4) seq = 1; else seq++;
blob_src = seq + ".jpg";
console.log('blob_src update ' + blob_src);
//1-working (/imgname.jpg)
//document.getElementById('asky').setAttribute("material", "src", blob_src);
//2-not working (/blob:......)
return fetch(blob_src)
.then((response)=> {
return response.blob();
})
.then(blob => {
let blob_src_url = URL.createObjectURL(blob);
document.getElementById('asky').setAttribute("material", "src", blob_src_url);
return blob_src_url;
});
}
<script src="aframe-master.min.js"></script>
<a-scene>
<a-sky id="asky" material="opacity:1; src: 4.jpg" rotation="0 -130 0" foo></a-sky>
</a-scene>