Как использовать blob или dataURL в качестве источника a-frame или a-sky для 360photos - PullRequest
Новая
       14

Как использовать blob или dataURL в качестве источника a-frame или a-sky для 360photos

0 голосов
/ 13 сентября 2018

Я работаю над простым сценарием, чтобы показать 360 изображений в VR, одновременно меняя изображение динамически. На данный момент источник следующего изображения задается простым тайм-аутом (среди 4 локальных .jpg), но я планирую получить изображения с удаленной камеры, а затем обновлять представление a-sky каждые x секунд.

Мне удалось изменить атрибут a-sky src и установить другой файл n.jpg. Но я не смог установить блоб в качестве источника.

Пока что я просто конвертирую локальный jpg в большой двоичный объект, но следующий шаг - попросить API удаленной камеры иметь двоичный файл jpg и преобразовать его в 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>

1 Ответ

0 голосов
/ 15 сентября 2018

Попробуйте обернуть его в url(), может быть?Пока большой двоичный объект начинается с подобных данных 

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

Добавьте data:image/png;base64, или любой другой формат, если его там еще нет.

...