介绍视频后插入A帧和a场景

Question

我正在使用a-frame 360​​画廊作为个人项目的起点。

我的场景共有35张360º图像。 我还提供了一个播放onload的mp4视频。

问题是我真的不需要帧或任何图像，仅在视频播放完后才需要。 正如我在这里阅读的那样，我希望在视频播放完毕后注入框架脚本和场景。

我尝试过在a-资产和惰性资产加载中使用超时，但是没有任何运气。

我怎样才能做到这一点？

谢谢！

Answer 1

如果不使用诸如Angular，VueJs或（Aframe）React之类的框架，您可以在其中动态地加载组件（场景），则“注入”场景并不是完全不可能的。

在没有框架的情况下动态“加载”场景的一种方法可能是将场景元素包装在a-entity元素中并将其visibility属性设置为false。

例如：

<video #videoEl src="..."></video>
<a-scene>
  <a-entity #sceneEntity visible="false">
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
  </a-entity>
</a-scene>

<script>
  const videoEl = document.getElementById('videoEl');
  videoEl.onended = e => {
    document.getElementById('sceneEntity').setAttribute('visible', true);
  }
</script>

另一种方法是在视频元素完成后将整个场景作为字符串附加到DOM。 所提到的框架可以以复杂的方式提供这些内容。

我建议的是在播放视频时也暂停场景（ document.getElementsByTagNames('a-scene')[0].pause() ）。 目前，我不知道是否将实体的可视性属性设置为false会暂停其生命周期。