/** * @author mrdoob / http://mrdoob.com * @author Mugen87 / https://github.com/Mugen87 * * Based on @tojiro's vr-samples-utils.js */ var WEBVR = { createButton: function ( renderer, options ) { if ( options === undefined ) options = {}; if ( options.frameOfReferenceType === undefined ) options.frameOfReferenceType = 'stage'; 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, options ); } function showEnterXR( device ) { var currentSession = null; function onSessionStarted( session ) { session.addEventListener( 'end', onSessionEnded ); renderer.vr.setSession( session, options ); 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 ) { device.requestSession( { immersive: true, exclusive: true /* DEPRECATED */ } ).then( onSessionStarted ); } else { currentSession.end(); } }; renderer.vr.setDevice( device ); } function showVRNotFound() { button.style.display = ''; button.style.cursor = 'auto'; button.style.left = 'calc(50% - 75px)'; button.style.width = '150px'; button.textContent = 'VR NOT FOUND'; button.onmouseenter = null; button.onmouseleave = null; button.onclick = null; renderer.vr.setDevice( null ); } 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.requestDevice().then( function ( device ) { device.supportsSession( { immersive: true, exclusive: true /* DEPRECATED */ } ) .then( function () { showEnterXR( device ); } ) .catch( showVRNotFound ); } ).catch( showVRNotFound ); 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://webvr.info'; message.innerHTML = 'WEBVR NOT SUPPORTED'; message.style.left = 'calc(50% - 90px)'; message.style.width = '180px'; message.style.textDecoration = 'none'; stylizeElement( message ); return message; } }, // DEPRECATED checkAvailability: function () { console.warn( 'WEBVR.checkAvailability has been deprecated.' ); return new Promise( function () {} ); }, getMessageContainer: function () { console.warn( 'WEBVR.getMessageContainer has been deprecated.' ); return document.createElement( 'div' ); }, getButton: function () { console.warn( 'WEBVR.getButton has been deprecated.' ); return document.createElement( 'div' ); }, getVRDisplay: function () { console.warn( 'WEBVR.getVRDisplay has been deprecated.' ); } };