xr-mode-ui

Note: This documentation is for the old 1.5.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The xr-mode-ui component allows configuring and disabling of UI such as the enter VR / AR button, compatibility modal, and orientation modal for mobile. The xr-mode-ui component applies only to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

Example

<a-scene xr-mode-ui="enabled: false"></a-scene>

Properties

Property Description Default Value
cardboardModeEnabled Enables the now deprecated cardboard mode. false
enabled Whether or not to display UI related to entering VR. true
enterVRButton Selector to a custom VR button. On click, the button will enter VR. ‘’
enterVREnabled If the VR button is displayed when applicable false
enterARButton Selector to a custom AR button. On click, the button will enter AR. ‘’
enterAREnabled If the AR button is displayed when applicable false
XRMode If the AR, VR button or both will be displayed. ar, vr, xr

Specifying a Custom Enter VR Button

<a-scene
xr-mode-ui="enterVRButton: #myEnterVRButton; enterARButton: #myEnterARButton">
<!-- Style the button with images or whatever. -->
<a id="myEnterVRButton" href="#"></a>
<a id="myEnterARButton" href="#"></a>
</a-scene>