イントロビデオの後にAフレームとAシーンを挿入する

Question

私はa-frame 360 galleryを個人プロジェクトの出発点として使用しています。

私のシーンは合計35 360度の画像を持っています。 私はまた、オンロードを再生するmp4ビデオを含んでいます。

問題は、実際にはフレームや画像を必要としないことです。ビデオの再生が終了したときにのみ行うことができます。 私がhereを読んだので、ビデオの再生が終わったら、フレームスクリプトとシーンを挿入したいと思います。

私はa-assetsとlazy-asset-loadingでタイムアウトを使用しようとしましたが、運が悪いです。

どうすればいいですか？

ありがとうございます！

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

別のアプローチは、video要素が終了したDOMに文字列として、シーン全体を追加することです。これは、前述のフレームワークが洗練された方法で提供できるものです。

ビデオ再生中にシーン（document.getElementsByTagNames('a-scene')[0].pause()）を一時停止することをお勧めします。現時点では、エンティティの可視性プロパティをfalseに設定すると、ライフサイクルが一時停止するかどうかはわかりません。