123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238 |
- /**
- * @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 && options.frameOfReferenceType ) {
- renderer.vr.setFrameOfReferenceType( options.frameOfReferenceType );
- }
- 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 ) {
- 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.' );
- }
- };
|