From c8e8241b037f17180897a40f515ef46f3f6d1707 Mon Sep 17 00:00:00 2001 From: Diego Marcos Segura Date: Mon, 23 Oct 2023 17:10:10 -0700 Subject: [PATCH] Redesign enter session UI (fix #5369) --- .../{vr-mode-ui.md => xr-mode-ui.md} | 7 +- src/components/index.js | 2 +- src/components/scene/embedded.js | 2 +- .../scene/{vr-mode-ui.js => xr-mode-ui.js} | 94 ++++++++++++++++++- src/core/scene/a-scene.js | 2 +- src/style/aframe.css | 18 +++- src/utils/device.js | 2 +- 7 files changed, 115 insertions(+), 12 deletions(-) rename docs/components/{vr-mode-ui.md => xr-mode-ui.md} (82%) rename src/components/scene/{vr-mode-ui.js => xr-mode-ui.js} (72%) diff --git a/docs/components/vr-mode-ui.md b/docs/components/xr-mode-ui.md similarity index 82% rename from docs/components/vr-mode-ui.md rename to docs/components/xr-mode-ui.md index 005a50f0c70..8125e3bdfb4 100644 --- a/docs/components/vr-mode-ui.md +++ b/docs/components/xr-mode-ui.md @@ -1,5 +1,5 @@ --- -title: vr-mode-ui +title: xr-mode-ui type: components layout: docs parent_section: components @@ -23,9 +23,12 @@ to the [`` element][scene]. If we wish to simply toggle the UI, use CSS | 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 | +| 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 | +| enterXRButton | Selector to a custom AR button. On click, the button will enter AR. | '' | +| enterXREnabled | If the AR button is displayed when applicable | true | +| XRMode | Mode that the site enters when clicking the XR button (ar or vr). | vr | ### Specifying a Custom Enter VR Button diff --git a/src/components/index.js b/src/components/index.js index 1bf54bc34c8..6f927cfbc84 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -51,4 +51,4 @@ require('./scene/pool'); require('./scene/reflection'); require('./scene/screenshot'); require('./scene/stats'); -require('./scene/vr-mode-ui'); +require('./scene/xr-mode-ui'); diff --git a/src/components/scene/embedded.js b/src/components/scene/embedded.js index 59b5fadd4eb..991185d9fa8 100644 --- a/src/components/scene/embedded.js +++ b/src/components/scene/embedded.js @@ -4,7 +4,7 @@ var registerComponent = require('../../core/component').registerComponent; * Component to embed an a-frame scene within the layout of a 2D page. */ module.exports.Component = registerComponent('embedded', { - dependencies: ['vr-mode-ui'], + dependencies: ['xr-mode-ui'], schema: {default: true}, diff --git a/src/components/scene/vr-mode-ui.js b/src/components/scene/xr-mode-ui.js similarity index 72% rename from src/components/scene/vr-mode-ui.js rename to src/components/scene/xr-mode-ui.js index 1ba2aafebfe..4399fc5a979 100644 --- a/src/components/scene/vr-mode-ui.js +++ b/src/components/scene/xr-mode-ui.js @@ -2,27 +2,34 @@ var registerComponent = require('../../core/component').registerComponent; var constants = require('../../constants/'); var utils = require('../../utils/'); var bind = utils.bind; +var warn = utils.debug('components:xr-mode-ui:warn'); var ENTER_VR_CLASS = 'a-enter-vr'; var ENTER_AR_CLASS = 'a-enter-ar'; +var ENTER_XR_CLASS = 'a-enter-xr'; + var ENTER_VR_BTN_CLASS = 'a-enter-vr-button'; var ENTER_AR_BTN_CLASS = 'a-enter-ar-button'; +var ENTER_XR_BTN_CLASS = 'a-enter-xr-button'; var HIDDEN_CLASS = 'a-hidden'; var ORIENTATION_MODAL_CLASS = 'a-orientation-modal'; /** * UI for entering VR mode. */ -module.exports.Component = registerComponent('vr-mode-ui', { +module.exports.Component = registerComponent('xr-mode-ui', { dependencies: ['canvas'], schema: { enabled: {default: true}, cardboardModeEnabled: {default: false}, enterVRButton: {default: ''}, - enterVREnabled: {default: true}, + enterVREnabled: {default: false}, enterARButton: {default: ''}, - enterAREnabled: {default: false} + enterAREnabled: {default: false}, + enterXRButton: {default: ''}, + enterXREnabled: {default: true}, + XRMode: {default: 'vr', oneOf: ['vr', 'ar']} }, init: function () { @@ -34,6 +41,8 @@ module.exports.Component = registerComponent('vr-mode-ui', { this.insideLoader = false; this.enterVREl = null; this.enterAREl = null; + this.enterXREl = null; + this.orientationModalEl = null; this.bindMethods(); @@ -56,6 +65,7 @@ module.exports.Component = registerComponent('vr-mode-ui', { bindMethods: function () { this.onEnterVRButtonClick = bind(this.onEnterVRButtonClick, this); this.onEnterARButtonClick = bind(this.onEnterARButtonClick, this); + this.onEnterXRButtonClick = bind(this.onEnterXRButtonClick, this); this.onModalClick = bind(this.onModalClick, this); this.toggleOrientationModalIfNeeded = bind(this.toggleOrientationModalIfNeeded, this); this.updateEnterInterfaces = bind(this.updateEnterInterfaces, this); @@ -82,6 +92,17 @@ module.exports.Component = registerComponent('vr-mode-ui', { this.el.enterAR(); }, + /** + * Enter XR when clicked. + */ + onEnterXRButtonClick: function () { + if (this.data.XRMode === 'vr') { + this.el.enterVR(); + } else { + this.el.enterAR(); + } + }, + update: function () { var data = this.data; var sceneEl = this.el; @@ -115,6 +136,17 @@ module.exports.Component = registerComponent('vr-mode-ui', { } } + if (!this.enterXREl && data.enterXREnabled) { + if (data.enterXRButton) { + // Custom button. + this.enterXREl = document.querySelector(data.enterXRButton); + this.enterXREl.addEventListener('click', this.onEnterXRButtonClick); + } else { + this.enterXREl = createEnterXRButton(this.onEnterXRButtonClick, this.data.XRMode); + sceneEl.appendChild(this.enterXREl); + } + } + this.orientationModalEl = createOrientationModal(this.onModalClick); sceneEl.appendChild(this.orientationModalEl); @@ -129,10 +161,12 @@ module.exports.Component = registerComponent('vr-mode-ui', { }); this.enterVREl = undefined; this.enterAREl = undefined; + this.enterXREl = undefined; this.orientationModalEl = undefined; }, updateEnterInterfaces: function () { + this.toggleEnterXRButtonIfNeeded(); this.toggleEnterVRButtonIfNeeded(); this.toggleEnterARButtonIfNeeded(); this.toggleOrientationModalIfNeeded(); @@ -141,7 +175,10 @@ module.exports.Component = registerComponent('vr-mode-ui', { toggleEnterVRButtonIfNeeded: function () { var sceneEl = this.el; if (!this.enterVREl) { return; } - if (sceneEl.is('vr-mode') || + if (this.enterXREl) { + warn('The VR button won\'t display because the XR button is also enabled. Can\'t display both simulatenously. Choose one or the other'); + } + if (this.enterXREl || sceneEl.is('vr-mode') || ((sceneEl.isMobile || utils.device.isMobileDeviceRequestingDesktopSite()) && !this.data.cardboardModeEnabled && !utils.device.checkVRSupport())) { this.enterVREl.classList.add(HIDDEN_CLASS); } else { @@ -153,14 +190,29 @@ module.exports.Component = registerComponent('vr-mode-ui', { toggleEnterARButtonIfNeeded: function () { var sceneEl = this.el; if (!this.enterAREl) { return; } + if (this.enterXREl) { + warn('The AR button won\'t display because the XR button is also enabled. Can\'t display both simulatenously. Choose one or the other'); + } // Hide the button while in a session, or if AR is not supported. - if (sceneEl.is('vr-mode') || !utils.device.checkARSupport()) { + if (this.enterXREl || sceneEl.is('vr-mode') || !utils.device.checkARSupport()) { this.enterAREl.classList.add(HIDDEN_CLASS); } else { this.enterAREl.classList.remove(HIDDEN_CLASS); } }, + toggleEnterXRButtonIfNeeded: function () { + var sceneEl = this.el; + if (!this.enterXREl) { return; } + if (sceneEl.is('vr-mode') || + ((sceneEl.isMobile || utils.device.isMobileDeviceRequestingDesktopSite()) && !this.data.cardboardModeEnabled && !utils.device.checkVRSupport())) { + this.enterXREl.classList.add(HIDDEN_CLASS); + } else { + if (!utils.device.checkVRSupport()) { this.enterXREl.classList.add('fullscreen'); } + this.enterXREl.classList.remove(HIDDEN_CLASS); + } + }, + toggleOrientationModalIfNeeded: function () { var sceneEl = this.el; var orientationModalEl = this.orientationModalEl; @@ -236,6 +288,38 @@ function createEnterARButton (onClick) { return wrapper; } +/** + * Create a button that when clicked will enter into XR mode (vr or ar) + * + * Structure:
+ * + * @param {function} onClick - click event handler + * @returns {Element} Wrapper
. + */ +function createEnterXRButton (onClick, xrMode) { + var xrButton; + var wrapper; + + // Create elements. + wrapper = document.createElement('div'); + wrapper.classList.add(ENTER_XR_CLASS); + wrapper.setAttribute(constants.AFRAME_INJECTED, ''); + xrButton = document.createElement('button'); + xrButton.className = ENTER_XR_BTN_CLASS; + xrButton.setAttribute('title', + 'Enter XR mode with a headset or handheld device.'); + xrButton.setAttribute(constants.AFRAME_INJECTED, ''); + if (utils.device.isMobile()) { applyStickyHoverFix(xrButton); } + // Insert elements. + if (xrMode === 'ar') { xrButton.classList.add('ar-mode'); } + wrapper.appendChild(xrButton); + xrButton.addEventListener('click', function (evt) { + onClick(); + evt.stopPropagation(); + }); + return wrapper; +} + /** * Creates a modal dialog to request the user to switch to landscape orientation. * diff --git a/src/core/scene/a-scene.js b/src/core/scene/a-scene.js index fca1773c875..9025196ed86 100644 --- a/src/core/scene/a-scene.js +++ b/src/core/scene/a-scene.js @@ -89,7 +89,7 @@ class AScene extends AEntity { this.setAttribute('inspector', ''); this.setAttribute('keyboard-shortcuts', ''); this.setAttribute('screenshot', ''); - this.setAttribute('vr-mode-ui', ''); + this.setAttribute('xr-mode-ui', ''); this.setAttribute('device-orientation-permission-ui', ''); super.connectedCallback(); diff --git a/src/style/aframe.css b/src/style/aframe.css index 60ca6996659..ba54839db44 100644 --- a/src/style/aframe.css +++ b/src/style/aframe.css @@ -26,6 +26,7 @@ html.a-fullscreen .a-canvas { position: fixed !important; } +html:not(.a-fullscreen) .a-enter-xr, html:not(.a-fullscreen) .a-enter-vr, html:not(.a-fullscreen) .a-enter-ar { right: 5px; @@ -135,6 +136,7 @@ a-scene audio { left: -4px; } +.a-enter-xr, .a-enter-vr, .a-enter-ar { font-family: sans-serif, monospace; @@ -151,6 +153,7 @@ a-scene audio { right: 80px; } +.a-enter-xr-button, .a-enter-vr-button, .a-enter-vr-modal, .a-enter-vr-modal a { @@ -167,10 +170,21 @@ a-scene audio { background: rgba(0, 0, 0, 0.20) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='62' viewBox='0 0 108 62'%3E%3Ctitle%3Eaframe-armode-noborder-reduced-tracking%3C/title%3E%3Cpath d='M96,0H12A12,12,0,0,0,0,12V50A12,12,0,0,0,12,62H96a12,12,0,0,0,12-12V12A12,12,0,0,0,96,0Zm8,50a8,8,0,0,1-8,8H12a8,8,0,0,1-8-8V12a8,8,0,0,1,8-8H96a8,8,0,0,1,8,8Z' fill='%23fff'/%3E%3Cpath d='M43.35,39.82H32.51L30.45,46H23.88L35,16h5.73L52,46H45.43Zm-9.17-5h7.5L37.91,23.58Z' fill='%23fff'/%3E%3Cpath d='M68.11,35H63.18V46H57V16H68.15q5.31,0,8.2,2.37a8.18,8.18,0,0,1,2.88,6.7,9.22,9.22,0,0,1-1.33,5.12,9.09,9.09,0,0,1-4,3.26l6.49,12.26V46H73.73Zm-4.93-5h5a5.09,5.09,0,0,0,3.6-1.18,4.21,4.21,0,0,0,1.28-3.27,4.56,4.56,0,0,0-1.2-3.34A5,5,0,0,0,68.15,21h-5Z' fill='%23fff'/%3E%3C/svg%3E") 50% 50% no-repeat; } -.a-enter-vr.fullscreen .a-enter-vr-button { +.a-enter-xr-button { + background: rgba(0, 0, 0, 0.35) url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' width='108' height='62' viewBox='0 0 108 62'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg id='XR_-_VR'%3E%3Cpath class='cls-1' d='m68.82,21.56h-4.57v8.26h4.57c1.37,0,2.41-.36,3.1-1.09.69-.72,1.04-1.73,1.04-3.03s-.35-2.31-1.05-3.05c-.7-.74-1.73-1.11-3.09-1.11Z'/%3E%3Cpath class='cls-1' d='m96,0H12C5.37,0,0,5.37,0,12v38c0,6.63,5.37,12,12,12h84c6.63,0,12-5.37,12-12V12c0-6.63-5.37-12-12-12Zm-52.95,46l-5.05-10.16-5.05,10.16h-8.32l8.59-15.12-8.37-14.88h8.24l4.9,9.97,4.9-9.97h8.26l-8.39,14.88,8.61,15.12h-8.34Zm38.15,0h-7.75l-5.3-10.61h-3.91v10.61h-7.23v-30h11.81c3.56,0,6.34.79,8.34,2.37,2.01,1.58,3.01,3.81,3.01,6.69,0,2.09-.42,3.82-1.27,5.19-.84,1.37-2.17,2.48-3.97,3.33l6.26,12.11v.31Z'/%3E%3C/g%3E%3C/svg%3E") 50% 50% no-repeat; +} + +.a-enter-xr-button.ar-mode { + background: rgba(0, 0, 0, 0.20) url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' width='108' height='62' viewBox='0 0 108 62'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg id='XR_-_AR'%3E%3Cpath class='cls-1' d='m96,0H12C5.4,0,0,5.4,0,12v38c0,6.6,5.4,12,12,12h84c6.6,0,12-5.4,12-12V12c0-6.6-5.4-12-12-12Zm8,50c0,4.42-3.58,8-8,8H12c-4.42,0-8-3.58-8-8V12c0-4.42,3.58-8,8-8h84c4.42,0,8,3.58,8,8v38Z'/%3E%3Cpath class='cls-1' d='m38.5,26.34l5.62-10.34h7.11l-8.74,14.88,8.96,15.12h-7.19l-5.77-10.51-5.77,10.51h-7.19l8.96-15.12-8.74-14.88h7.11l5.62,10.34Z'/%3E%3Cpath class='cls-1' d='m68.11,35.02h-4.92v10.98h-6.18v-30h11.15c3.54,0,6.28.79,8.2,2.37s2.88,3.81,2.88,6.7c0,2.05-.44,3.75-1.33,5.12s-2.23,2.46-4.03,3.27l6.49,12.26v.29h-6.63l-5.62-10.98Zm-4.92-5.01h4.99c1.55,0,2.75-.39,3.61-1.18s1.28-1.88,1.28-3.27-.4-2.53-1.21-3.34-2.04-1.22-3.7-1.22h-4.97v9Z'/%3E%3C/g%3E%3C/svg%3E") 50% 50% no-repeat; +} + +.a-enter-vr.fullscreen .a-enter-vr-button, +.a-enter-vr.fullscreen .a-enter-xr-button { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='108' height='62' viewBox='0 0 108 62' version='1.1' id='svg320' sodipodi:docname='fullscreen-aframe.svg' xml:space='preserve' inkscape:version='1.2.1 (9c6d41e 2022-07-14)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E%3Cdefs id='defs324' /%3E%3Csodipodi:namedview id='namedview322' pagecolor='%23ffffff' bordercolor='%23000000' borderopacity='0.25' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' showgrid='false' inkscape:zoom='3.8064516' inkscape:cx='91.423729' inkscape:cy='-1.4449153' inkscape:window-width='1440' inkscape:window-height='847' inkscape:window-x='32' inkscape:window-y='25' inkscape:window-maximized='0' inkscape:current-layer='svg320' /%3E%3Ctitle id='title312'%3Eaframe-armode-noborder-reduced-tracking%3C/title%3E%3Cpath d='M96 0H12A12 12 0 0 0 0 12V50A12 12 0 0 0 12 62H96a12 12 0 0 0 12-12V12A12 12 0 0 0 96 0Zm8 50a8 8 0 0 1-8 8H12a8 8 0 0 1-8-8V12a8 8 0 0 1 8-8H96a8 8 0 0 1 8 8Z' fill='%23fff' id='path314' style='fill:%23ffffff' /%3E%3Cg id='g356' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g358' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g360' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g362' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g364' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g366' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g368' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g370' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g372' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g374' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g376' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g378' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g380' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g382' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cg id='g384' transform='translate(-206.61017 -232.61864)'%3E%3C/g%3E%3Cmetadata id='metadata561'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:title%3Eaframe-armode-noborder-reduced-tracking%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cpath d='m 98.168511 40.083649 c 0 -1.303681 -0.998788 -2.358041 -2.239389 -2.358041 -1.230088 0.0031 -2.240892 1.05436 -2.240892 2.358041 v 4.881296 l -9.041661 -9.041662 c -0.874129 -0.875631 -2.288954 -0.875631 -3.16308 0 -0.874129 0.874126 -0.874129 2.293459 0 3.167585 l 8.995101 8.992101 h -4.858767 c -1.323206 0.0031 -2.389583 1.004796 -2.389583 2.239386 0 1.237598 1.066377 2.237888 2.389583 2.237888 h 10.154599 c 1.323206 0 2.388082 -0.998789 2.392587 -2.237888 -0.0044 -0.03305 -0.009 -0.05858 -0.0134 -0.09161 0.0046 -0.04207 0.0134 -0.08712 0.0134 -0.13066 V 40.085172 h -1.52e-4' id='path596' style='fill:%23ffffff%3Bstroke-width:1.50194' /%3E%3Cpath d='m 23.091002 35.921781 -9.026643 9.041662 v -4.881296 c 0 -1.303681 -1.009302 -2.355037 -2.242393 -2.358041 -1.237598 0 -2.237888 1.05436 -2.237888 2.358041 l -0.0031 10.016421 c 0 0.04356 0.01211 0.08862 0.0015 0.130659 -0.0031 0.03153 -0.009 0.05709 -0.01211 0.09161 0.0031 1.239099 1.069379 2.237888 2.391085 2.237888 h 10.156101 c 1.320202 0 2.388079 -1.000291 2.388079 -2.237888 0 -1.234591 -1.067877 -2.236383 -2.388079 -2.239387 h -4.858767 l 8.995101 -8.9921 c 0.871126 -0.874127 0.871126 -2.293459 0 -3.167586 -0.875628 -0.877132 -2.291957 -0.877132 -3.169087 -1.52e-4' id='path598' style='fill:%23ffffff%3Bstroke-width:1.50194' /%3E%3Cpath d='m 84.649572 25.978033 9.041662 -9.041664 v 4.881298 c 0 1.299176 1.010806 2.350532 2.240891 2.355037 1.240601 0 2.23939 -1.055861 2.23939 -2.355037 V 11.798242 c 0 -0.04356 -0.009 -0.08862 -0.0134 -0.127671 0.0044 -0.03153 0.009 -0.06157 0.0134 -0.09313 -0.0044 -1.240598 -1.069379 -2.2393873 -2.391085 -2.2393873 h -10.1546 c -1.323205 0 -2.38958 0.9987893 -2.38958 2.2393873 0 1.233091 1.066375 2.237887 2.38958 2.240891 h 4.858768 l -8.995102 8.9921 c -0.874129 0.872625 -0.874129 2.288954 0 3.161578 0.874127 0.880137 2.288951 0.880137 3.16308 1.5e-4' id='path600' style='fill:%23ffffff%3Bstroke-width:1.50194' /%3E%3Cpath d='m 17.264988 13.822853 h 4.857265 c 1.320202 -0.0031 2.388079 -1.0078 2.388079 -2.240889 0 -1.240601 -1.067877 -2.2393893 -2.388079 -2.2393893 H 11.967654 c -1.321707 0 -2.388082 0.9987883 -2.391085 2.2393893 0.0031 0.03153 0.009 0.06157 0.01211 0.09313 -0.0031 0.03905 -0.0015 0.08262 -0.0015 0.127671 l 0.0031 10.020926 c 0 1.299176 1.00029 2.355038 2.237887 2.355038 1.233092 -0.0044 2.242393 -1.055862 2.242393 -2.355038 v -4.881295 l 9.026644 9.041661 c 0.877132 0.878635 2.293459 0.878635 3.169087 0 0.871125 -0.872624 0.871125 -2.288953 0 -3.161577 l -8.995282 -8.993616' id='path602' style='fill:%23ffffff%3Bstroke-width:1.50194' /%3E%3C/svg%3E"); } +.a-enter-xr-button, +.a-enter-xr-button.ar-mode, .a-enter-vr-button, .a-enter-ar-button { background-size: 90% 90%; @@ -202,6 +216,8 @@ a-scene audio { border-radius: 7px; } +.a-enter-xr-button:active, +.a-enter-xr-button:hover, .a-enter-ar-button:active, .a-enter-ar-button:hover, .a-enter-vr-button:active, diff --git a/src/utils/device.js b/src/utils/device.js index 52310481a82..a7c9c8ae428 100644 --- a/src/utils/device.js +++ b/src/utils/device.js @@ -33,7 +33,7 @@ if (isWebXRAvailable) { return; } if (sceneEl.hasLoaded) { - sceneEl.components['vr-mode-ui'].updateEnterInterfaces(); + sceneEl.components['xr-mode-ui'].updateEnterInterfaces(); } else { sceneEl.addEventListener('loaded', updateEnterInterfaces); }