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

Question

I am using the a-frame 360 gallery as a starting point for a personal project.

My scene has a total of 35 360º images. I have also included an mp4 video that plays onload.

The problem is I don't really need a-frame or any image, I only do when the video has finished playing. As I have read here I would love to Inject aframe scripts and the scene once the video has finished playing.

I have tried using timeout in a-assets and lazy-asset-loading, without any luck.

How can I do this?

Thanks!

Answer 1

Without the use of a framework such as Angular, VueJs or (Aframe)React where you can load components (scenes) dynamically, 'injecting' a scene is not entirely impossible.

An approach to 'load' scenes dynamically without a framework could be to wrap your scene elements in an a-entity element and set it's visability attribute to false.

eg:

<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>

Another approach is to append an entire scene as string to the DOM when the video element has finished. Which is what the mentioned frameworks can provide in a sophisticated manner.

Something I would suggest is to also pause the scene ( document.getElementsByTagNames('a-scene')[0].pause() ) while the video is playing. At the moment I am not aware if setting an entity's visibility property to false will pause it's lifecycle.