通过 A-Frame 的 VR 模式按钮隐藏页面元素

Question

我正在使用具有嵌入属性的 A 帧。

请参考这个代码笔：

<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-Glass 模式。

在移动模式下，工具栏一直留在屏幕上，我想暂时隐藏它。

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

有什么方法可以'listen'到A-Frame的DOM或在移动设备上进入全屏模式吗？

谢谢！

Answer 1

写一个A-Frame组件，这样你就不用手动等待初始化了。

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>

通过 A-Frame 的 VR 模式按钮隐藏页面元素

Hide page elements by A-Frame's VR mode button

javascript

aframe