Search code examples
javascriptaframewebvr

Exit Aframe full screen


I have an embedded a-scene element, where users can click to enter the Aframe full screen mode. On a specific event (user navigated to specific position in a-scene), I want to trigger an automatic exit of the full screen mode. This would be the equivalent of user pressing the ESC key, but programmatically. How can I do this?

Here is my a-scene code:

...
<a-scene id="3d-view" embedded style="z-index: 9999;">
<a-entity position="33 0 -33" rotation="0 180 0" id="camera" camera="userHeight: 1.6" listener>
</a-entity>
...
<!-- Lighting -->
<a-light type="ambient" color="#bbb"></a-light>
<a-light color="#ccc" position="0 30 0" distance="100" intensity="0.4" type="point"></a-light>
<a-light color="#ccc" position="3 10 -10" distance="50" intensity="0.4" type="point"></a-light>
<a-entity id="a"></a-entity>
</a-scene>
...

Here is the method for exiting full screen:

var obj3d = document.querySelector("#camera").object3D;
AFRAME.registerComponent('listener', {
    tick: function () {
        if(Math.abs(obj3d.position.x) < 35) {
            //HERE IT SHOULD EXIT FULL SCREEN IF WE ARE IN FULL SCREEN
        }
    }
});

Solution

  • this.el.sceneEl.exitVR()

    or

    exitFullscreen();
    
       function exitFullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }