The xr-mode-ui component configures or disables the enter VR and AR buttons. Buttons only display if the browser supports the corresponding modes (AR or VR). 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-scenexr-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.
true
enterARButton
Selector to a custom AR button. On click, the button will enter AR.
‘’
enterAREnabled
If the AR button is displayed when applicable.
true
XRMode
If the AR button, VR button, or both buttons will be displayed.
vr
Specifying Custom Enter VR and AR Buttons
<a-scene xr-mode-ui="enterVRButton: #myEnterVRButton; enterARButton: #myEnterARButton; XRMode: xr;"> <!-- Style the button with images and/or custom CSS. --> <aid="myEnterVRButton"href="#"></a> <aid="myEnterARButton"href="#"></a> </a-scene>