CODEWITHSUNDEEP
javascripthtml5-videoaframe
Mustang
Mustang

Reputation: 604

Toggle A-Frame's vr-mode-ui dynamically

I am trying to hide/show the A-Frame's vr-mode-ui dynamically based on some rules in my code. Initally the <a-scene> looks like this: 

<a-scene id="vr-scene" vr-mode-ui="enabled: false">

In my controller, I am trying to enable and disable it based on a flag:

let scene = document.querySelector('#vr-scene');
if (showVR) {
  scene.setAttribute('vr-mode-ui', 'enabled: true');
} else {
scene.setAttribute('vr-mode-ui', 'enabled: false');
}

But the moment this toggle happens, I get a error on console which reads like this: TypeError: Cannot read property 'removeChild' of null

Please advise what's going wrong here. Is there a better way to enable/disable the VR button ?

Here's a simple codepen: https://codepen.io/anon/pen/BdZWdz

Steps:

  1. Click Enable
  2. Click Disable
  3. Click Enable (VR button doesn't come up)

Upvotes: 0

Views: 1165

Answers (1)

ngokevin
ngokevin

Reputation: 13233

Currently the component doesn't support enabling/disabling much of the button. More of a one-time thing. This can be fixed but will file an issue.

In the meantime, it would be easier to simply toggle the visibility of the button using CSS:

document.querySelector('.a-enter-vr-button').style.visible = 'none';

Upvotes: 3

Related Questions