如何使用 aframe 显示弯曲的视频答案

【问题标题】：How to display a curved video with aframe如何使用 aframe 显示弯曲的视频
【发布时间】：2019-04-22 12:31:38
【问题描述】：

我试过<a-videosphere> 和<a-video>，它们都很棒。

但是，如果我使用“普通”视频，a-videosphere 会令人难以置信地拉伸，而a-video 则只是平坦。

但是有没有办法让视频围绕用户弯曲？

就像用户在圆柱体内一样：类似于a-curvedimage，但用于视频。

编辑（a-curvedimage 和 src 的问题）：

【问题讨论】：

标签： aframe

【解决方案1】：

您可以使用src 属性将视频显示为任何几何体上的纹理：

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

混音示例故障here。

如果您询问是否可以制作普通的 Equirectangular 视频，无需提前准备或使用一些图像处理库，aframe 不会为您做。

【讨论】：

感谢您的回答！！通过使用弯曲图像，一切正常，但图像非常失真（在原始帖子中添加了图像），我不明白为什么：<a-curvedimage src="#video" height="9" position="0 0 0" radius="8" theta-length="72" rotation="0 180 0"></a-curvedimage> 视频是 mp4
视频尺寸是多少？

【解决方案2】：

我在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 有一个great calculator 用于弯曲图像和视频的不同维度的属性。

编辑：视频在 X 轴上被反转给用户，因此添加了一个带有 -1 的 X 轴缩放属性。

【讨论】：