时间戳

首页 > 解决方案 > 如何使用 blobs 或 dataURL 作为 360photos 的 a-frame 或 a-sky 的 src

blob - 如何使用 blobs 或 dataURL 作为 360photos 的 a-frame 或 a-sky 的 src

问题描述

我正在编写一个简单的脚本来在 VR 中显示 360 度图像，同时动态更改图像。目前，下一个图像源由一个简单的超时设置（在 4 个本地 .jpg 中），但我计划从远程相机获取图像，然后每 x 秒更新一次天空视图。

我能够更改 a-sky src 属性并设置不同的 n.jpg。但我无法将 blob 设置为源。

现在我只是将本地 jpg 转换为 blob，但下一步是要求远程相机 api 拥有 jpg 二进制文件，并将其转换为 blob url。无论如何，没有显示新图像。它似乎仅在您将静态内容作为 src 时才有效。

我能怎么做？谢谢

这里部分来源：

      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>

标签： blobaframesrcvirtual-reality

解决方案

试着把它包起来url()，也许？只要 blob 以类似数据开头

document.getElementById('asky').setAttribute("material", "src", `url(data:image/png;base64,${blob_src_url})`);

data:image/png;base64,如果还没有格式，请添加或任何格式。

推荐阅读