AフレームのVRモードボタンでページ要素を非表示にする

Question

属性が埋め込まれたAフレームを使用しています。

このcodepenを参照してください：

http://codepen.io/ymcheung/full/zKyyqX/

<a-scene embedded> 
    <a-sky src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky> 
</a-scene> 

---

// .a-enter-vr-button is supplied by A-Frame 
var sceneVRButton = document.querySelector('.a-enter-vr-button'); 

それはVR-グラスに入りながら、デスクトップ上でフルスクリーンモードを入力します。右下隅にあるVRモードボタンをクリックしますモバイルモード。

モバイルモードでは、ツールバーは画面上に残り、一時的に非表示にします。

function hideinHome() 
{ 
    document.querySelector('.floatingBar').style.opacity = 0; 
} 

sceneVRButton.addEventListener('click', hideinHome, false); 

しかし、A-FrameのDOMはJavaScriptより後に読み込まれているようです。 Chromeのコンソールで

メッセージがある：

Uncaught TypeError: Cannot read property 'addEventListener' of null 

は、フレームののDOMに「聞く」や携帯でフルスクリーンモードに入るための任意の方法はありますか？

ありがとうございました！

Answer 1

初期化を手動で待つ必要がないように、Aフレームコンポーネントを作成します。

AFRAME.registerComponent('hide-on-enter-vr-click', { 
    schema: {type: 'selector'}, 

    init: function() { 
    var element = this.data; 
    var button = this.el.querySelector('.a-enter-vr-button'); 
    button.addEventListener('click', function() { 
     element.style.opacity = 0; 
    }); 
    } 
}); 

その後でそれをフック。

<a-scene hide-on-enter-vr-click=".floatingBar"></a-scene>