ARButton: Added DOM Overlay / close button.

examples/jsm/webxr/ARButton.js

@@ -6,6 +6,38 @@ class ARButton {
 
 		function showStartAR( /*device*/ ) {
 
+			if ( sessionInit.domOverlay === undefined ) {
+
+				var overlay = document.createElement( 'div' );
+				overlay.style.display = 'none';
+				document.body.appendChild( overlay );
+
+				var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+				svg.setAttribute( 'width', 38 );
+				svg.setAttribute( 'height', 38 );
+				svg.style.position = 'absolute';
+				svg.style.right = '20px';
+				svg.style.top = '20px';
+				svg.addEventListener( 'click', function () {
+
+					currentSession.end();
+
+				} );
+				overlay.appendChild( svg );
+
+				var path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+				path.setAttribute( 'd', 'M 12,12 L 28,28 M 28,12 12,28' );
+				path.setAttribute( 'stroke', '#fff' );
+				path.setAttribute( 'stroke-width', 2 );
+				svg.appendChild( path );
+
+				sessionInit.optionalFeatures = [ 'dom-overlay' ];
+				sessionInit.domOverlay = { root: overlay };
+
+			}
+
+			//
+
 			let currentSession = null;
 
 			function onSessionStarted( session ) {
@@ -14,7 +46,9 @@ class ARButton {
 
 				renderer.xr.setReferenceSpaceType( 'local' );
 				renderer.xr.setSession( session );
+
 				button.textContent = 'STOP AR';
+				sessionInit.domOverlay.root.style.display = '';
 
 				currentSession = session;
 
@@ -25,6 +59,7 @@ class ARButton {
 				currentSession.removeEventListener( 'end', onSessionEnded );
 
 				button.textContent = 'START AR';
+				sessionInit.domOverlay.root.style.display = 'none';
 
 				currentSession = null;