在介绍视频后注入 A-Frame 和 a-scene

Posted 2023-02-25

【中文标题】在介绍视频后注入 A-Frame 和 a-scene

【英文标题】：Inject A-Frame and a-scene after intro video

【发布时间】：2017-09-06 16:40:25

【问题描述】：

我使用a-frame 360 gallery 作为个人项目的起点。

我的场景共有 35 个 360º 图像。 我还包含了一个可以在加载时播放的 mp4 视频。

问题是我真的不需要帧或任何图像，我只在视频播放完毕后才需要。 正如我所读到的here，我很想在视频播放完毕后注入框架脚本和场景。

我曾尝试在 a-assets 和lazy-asset-loading 中使用超时，但没有任何运气。

我该怎么做？

谢谢！

【参考方案1】：

如果不使用可以动态加载组件（场景）的框架，例如 Angular、VueJs 或 (Aframe)React，“注入”场景并非完全不可能。

在没有框架的情况下动态“加载”场景的一种方法是将场景元素包装在 a-entity 元素中，并将其可见性属性设置为 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"   depth="1" color="#4CC3D9"></a-box>
    <a-cylinder position="1 0.75 -3" radius="0.5"  color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0"   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 是否会暂停它的生命周期。

【讨论】：

感谢您的提示！我的主要问题是，在我的 中， 中有 30 多个图像，并且在慢速网络中加载需要永远。在加载所有场景之前，视频不会播放。如何停止资产渲染阻塞？可见性属性不会暂停它的渲染。你有 a-scene.pause() 的例子吗？谢谢！