Как отобразить изогнутое видео с рамкой - PullRequest
0 голосов
/ 19 декабря 2018

Я пробовал <a-videosphere> и <a-video>, и они великолепны.

Но если я использую "нормальное" видео, оно невероятно растягивается с a-videosphere и просто с плоской a-video.

Но есть ли способ изогнуть видео вокруг пользователя?

Так же, как если бы пользователь находился внутри цилиндра: похоже на a-curvedimage, но для видео.

РЕДАКТИРОВАТЬ (проблема с a-curvedimage и src):

enter image description here

Ответы [ 2 ]

0 голосов
/ 04 апреля 2019

Я столкнулся с той же проблемой с a-curvedimage и атрибутом src и решил ее, используя вместо этого общий элемент a-entity, воссоздав двусторонний цилиндр с открытым концом элемента a-curvedimage.

Пример для видео 1280x720:

<a-scene>
  <a-assets>
    <video id="myvideo" preload="auto" src="/path/to/video.mp4" width="1280" height="720" autoplay="true" loop="true" crossorigin="anonymous" playsinline="" webkit-playsinline=""></video>
  </a-assets>
  <a-entity material="shader: flat; side: double; src: #myvideo" geometry="primitive: cylinder; radius: 5; height: 3.6815; open-ended: true; theta-start: 142.5; theta-length: 75; position="0 1.5 0" rotation="0 0 0" scale="-1 1 1"></a-entity>
</a-scene>

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

Редактировать: видео было инвертировано по оси X для пользователя, поэтому добавлен атрибут масштаба с -1 для оси X.

0 голосов
/ 19 декабря 2018

Вы можете отобразить видео в качестве текстуры на любой геометрии, используя атрибут src:

<a-box src="#video"></a-box>
<a-curvedimage src="#video"></a-curvedimage>
<a-torus-knot src="#video"></a-torus-knot>

Пример ремикса: глюк здесь .


Если вы спрашиваете, можете ли вы сделать нормальное видео равносторонним, без предварительной подготовки или какой-либо библиотеки манипуляций с изображениями, aframe не сделает этого за вас.

...