动态切换 A-Frame 的 vr-mode-ui

Posted 2023-03-14

【中文标题】动态切换 A-Frame 的 vr-mode-ui

【英文标题】：Toggle A-Frame's vr-mode-ui dynamically

【发布时间】：2017-08-10 23:07:38

【问题描述】：

我正在尝试根据我的代码中的一些规则动态隐藏/显示 A-Frame 的 vr-mode-ui。 <a-scene> 最初看起来像这样：

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

在我的控制器中，我正在尝试根据标志启用和禁用它：

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

但是当这种切换发生时，我在控制台上收到一个错误，如下所示： TypeError: Cannot read property 'removeChild' of null

请告知这里出了什么问题。有没有更好的方法来启用/禁用 VR 按钮？

这是一个简单的代码笔：https://codepen.io/anon/pen/BdZWdz

步骤：

点击启用 点击禁用 点击启用（VR 按钮不出现）

【问题讨论】：

您是否正在尝试禁用它，而它已经被禁用？

这里有两个问题，scene.setAttribute('vr-mode-ui', 'enabled: true'); 没有带回 vr 按钮。因此，下次它进入else 时，它仍然被禁用，因此出现错误。任何想法为什么 enabled 部分没有把它带回来！

@ngokevin：我添加了一个代码笔来演示我遇到的问题。请看一看。感谢您的帮助。

【参考方案1】：

目前该组件不支持启用/禁用大部分按钮。更多的是一次性的事情。这可以修复，但会提出问题。

与此同时，使用 CSS 简单地切换按钮的可见性会更容易：

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

【讨论】：

谢谢。这行得通。我的一位同事帮助我弄清楚这是一个错误，他实际上给了我和你一样的解决方案。