介紹視頻后插入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會暫停其生命周期。