|
|
@@ -0,0 +1,261 @@
|
|
|
+/**
|
|
|
+ * @author mrdoob / http://mrdoob.com
|
|
|
+ * @author Mugen87 / https://github.com/Mugen87
|
|
|
+ */
|
|
|
+
|
|
|
+var VRButton = {
|
|
|
+
|
|
|
+ createButton: function ( renderer, options ) {
|
|
|
+
|
|
|
+ if ( options && options.referenceSpaceType ) {
|
|
|
+
|
|
|
+ renderer.vr.setReferenceSpaceType( options.referenceSpaceType );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function showEnterVR( device ) {
|
|
|
+
|
|
|
+ button.style.display = '';
|
|
|
+
|
|
|
+ button.style.cursor = 'pointer';
|
|
|
+ button.style.left = 'calc(50% - 50px)';
|
|
|
+ button.style.width = '100px';
|
|
|
+
|
|
|
+ button.textContent = 'ENTER_VR';
|
|
|
+
|
|
|
+ button.onmouseenter = function () {
|
|
|
+
|
|
|
+ button.style.opacity = '1.0';
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ button.onmouseleave = function () {
|
|
|
+
|
|
|
+ button.style.opacity = '0.5';
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ button.onclick = function () {
|
|
|
+
|
|
|
+ device.isPresenting ? device.exitPresent() : device.requestPresent( [ { source: renderer.domElement } ] );
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ renderer.vr.setDevice( device );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function showEnterXR( /*device*/ ) {
|
|
|
+
|
|
|
+ var currentSession = null;
|
|
|
+
|
|
|
+ function onSessionStarted( session ) {
|
|
|
+
|
|
|
+ session.addEventListener( 'end', onSessionEnded );
|
|
|
+
|
|
|
+ renderer.vr.setSession( session );
|
|
|
+ button.textContent = 'EXIT VR';
|
|
|
+
|
|
|
+ currentSession = session;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onSessionEnded( /*event*/ ) {
|
|
|
+
|
|
|
+ currentSession.removeEventListener( 'end', onSessionEnded );
|
|
|
+
|
|
|
+ renderer.vr.setSession( null );
|
|
|
+ button.textContent = 'ENTER VR';
|
|
|
+
|
|
|
+ currentSession = null;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ button.style.display = '';
|
|
|
+
|
|
|
+ button.style.cursor = 'pointer';
|
|
|
+ button.style.left = 'calc(50% - 50px)';
|
|
|
+ button.style.width = '100px';
|
|
|
+
|
|
|
+ button.textContent = 'ENTER VR';
|
|
|
+
|
|
|
+ button.onmouseenter = function () {
|
|
|
+
|
|
|
+ button.style.opacity = '1.0';
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ button.onmouseleave = function () {
|
|
|
+
|
|
|
+ button.style.opacity = '0.5';
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ button.onclick = function () {
|
|
|
+
|
|
|
+ if ( currentSession === null ) {
|
|
|
+
|
|
|
+ // WebXR's requestReferenceSpace only works if the corresponding feature
|
|
|
+ // was requested at session creation time. For simplicity, just ask for
|
|
|
+ // the interesting ones as optional features, but be aware that the
|
|
|
+ // requestReferenceSpace call will fail if it turns out to be unavailable.
|
|
|
+ // ('local' is always available for immersive sessions and doesn't need to
|
|
|
+ // be requested separately.)
|
|
|
+
|
|
|
+ var sessionInit = { optionalFeatures: [ 'local-floor', 'bounded-floor' ] };
|
|
|
+ navigator.xr.requestSession( 'immersive-vr', sessionInit ).then( onSessionStarted );
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ currentSession.end();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function disableButton() {
|
|
|
+
|
|
|
+ button.style.display = '';
|
|
|
+
|
|
|
+ button.style.cursor = 'auto';
|
|
|
+ button.style.left = 'calc(50% - 75px)';
|
|
|
+ button.style.width = '150px';
|
|
|
+
|
|
|
+ button.onmouseenter = null;
|
|
|
+ button.onmouseleave = null;
|
|
|
+
|
|
|
+ button.onclick = null;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function showVRNotFound() {
|
|
|
+
|
|
|
+ disableButton();
|
|
|
+
|
|
|
+ button.textContent = 'VR NOT FOUND';
|
|
|
+
|
|
|
+ renderer.vr.setDevice( null );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function showXRNotFound() {
|
|
|
+
|
|
|
+ disableButton();
|
|
|
+
|
|
|
+ button.textContent = 'VR NOT FOUND';
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function stylizeElement( element ) {
|
|
|
+
|
|
|
+ element.style.position = 'absolute';
|
|
|
+ element.style.bottom = '20px';
|
|
|
+ element.style.padding = '12px 6px';
|
|
|
+ element.style.border = '1px solid #fff';
|
|
|
+ element.style.borderRadius = '4px';
|
|
|
+ element.style.background = 'rgba(0,0,0,0.1)';
|
|
|
+ element.style.color = '#fff';
|
|
|
+ element.style.font = 'normal 13px sans-serif';
|
|
|
+ element.style.textAlign = 'center';
|
|
|
+ element.style.opacity = '0.5';
|
|
|
+ element.style.outline = 'none';
|
|
|
+ element.style.zIndex = '999';
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if ( 'xr' in navigator ) {
|
|
|
+
|
|
|
+ var button = document.createElement( 'button' );
|
|
|
+ button.style.display = 'none';
|
|
|
+
|
|
|
+ stylizeElement( button );
|
|
|
+
|
|
|
+ navigator.xr.isSessionSupported( 'immersive-vr' ).then( function ( supported ) {
|
|
|
+
|
|
|
+ if ( supported ) {
|
|
|
+
|
|
|
+ showEnterXR();
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ showXRNotFound();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ return button;
|
|
|
+
|
|
|
+ } else if ( 'getVRDisplays' in navigator ) {
|
|
|
+
|
|
|
+ var button = document.createElement( 'button' );
|
|
|
+ button.style.display = 'none';
|
|
|
+
|
|
|
+ stylizeElement( button );
|
|
|
+
|
|
|
+ window.addEventListener( 'vrdisplayconnect', function ( event ) {
|
|
|
+
|
|
|
+ showEnterVR( event.display );
|
|
|
+
|
|
|
+ }, false );
|
|
|
+
|
|
|
+ window.addEventListener( 'vrdisplaydisconnect', function ( /*event*/ ) {
|
|
|
+
|
|
|
+ showVRNotFound();
|
|
|
+
|
|
|
+ }, false );
|
|
|
+
|
|
|
+ window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
|
|
|
+
|
|
|
+ button.textContent = event.display.isPresenting ? 'EXIT_VR' : 'ENTER_VR';
|
|
|
+
|
|
|
+ }, false );
|
|
|
+
|
|
|
+ window.addEventListener( 'vrdisplayactivate', function ( event ) {
|
|
|
+
|
|
|
+ event.display.requestPresent( [ { source: renderer.domElement } ] );
|
|
|
+
|
|
|
+ }, false );
|
|
|
+
|
|
|
+ navigator.getVRDisplays()
|
|
|
+ .then( function ( displays ) {
|
|
|
+
|
|
|
+ if ( displays.length > 0 ) {
|
|
|
+
|
|
|
+ showEnterVR( displays[ 0 ] );
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ showVRNotFound();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ } ).catch( showVRNotFound );
|
|
|
+
|
|
|
+ return button;
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ var message = document.createElement( 'a' );
|
|
|
+ message.href = 'https://immersive-web.github.io/webxr/';
|
|
|
+ message.innerHTML = 'WEBXR NOT SUPPORTED';
|
|
|
+
|
|
|
+ message.style.left = 'calc(50% - 90px)';
|
|
|
+ message.style.width = '180px';
|
|
|
+ message.style.textDecoration = 'none';
|
|
|
+
|
|
|
+ stylizeElement( message );
|
|
|
+
|
|
|
+ return message;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+export { VRButton };
|
Mr.doob