WebVR.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. /**
  2. * @author mrdoob / http://mrdoob.com
  3. * @author Mugen87 / https://github.com/Mugen87
  4. *
  5. * Based on @tojiro's vr-samples-utils.js
  6. */
  7. var WEBVR = {
  8. createButton: function ( renderer, options ) {
  9. if ( options && options.frameOfReferenceType ) {
  10. renderer.vr.setFrameOfReferenceType( options.frameOfReferenceType );
  11. }
  12. function showEnterVR( device ) {
  13. button.style.display = '';
  14. button.style.cursor = 'pointer';
  15. button.style.left = 'calc(50% - 50px)';
  16. button.style.width = '100px';
  17. button.textContent = 'ENTER VR';
  18. button.onmouseenter = function () { button.style.opacity = '1.0'; };
  19. button.onmouseleave = function () { button.style.opacity = '0.5'; };
  20. button.onclick = function () {
  21. device.isPresenting ? device.exitPresent() : device.requestPresent( [ { source: renderer.domElement } ] );
  22. };
  23. renderer.vr.setDevice( device );
  24. }
  25. function showEnterXR( device ) {
  26. var currentSession = null;
  27. function onSessionStarted( session ) {
  28. session.addEventListener( 'end', onSessionEnded );
  29. renderer.vr.setSession( session );
  30. button.textContent = 'EXIT VR';
  31. currentSession = session;
  32. }
  33. function onSessionEnded( event ) {
  34. currentSession.removeEventListener( 'end', onSessionEnded );
  35. renderer.vr.setSession( null );
  36. button.textContent = 'ENTER VR';
  37. currentSession = null;
  38. }
  39. //
  40. button.style.display = '';
  41. button.style.cursor = 'pointer';
  42. button.style.left = 'calc(50% - 50px)';
  43. button.style.width = '100px';
  44. button.textContent = 'ENTER VR';
  45. button.onmouseenter = function () { button.style.opacity = '1.0'; };
  46. button.onmouseleave = function () { button.style.opacity = '0.5'; };
  47. button.onclick = function () {
  48. if ( currentSession === null ) {
  49. device.requestSession( { immersive: true, exclusive: true /* DEPRECATED */ } ).then( onSessionStarted );
  50. } else {
  51. currentSession.end();
  52. }
  53. };
  54. renderer.vr.setDevice( device );
  55. }
  56. function showVRNotFound() {
  57. button.style.display = '';
  58. button.style.cursor = 'auto';
  59. button.style.left = 'calc(50% - 75px)';
  60. button.style.width = '150px';
  61. button.textContent = 'VR NOT FOUND';
  62. button.onmouseenter = null;
  63. button.onmouseleave = null;
  64. button.onclick = null;
  65. renderer.vr.setDevice( null );
  66. }
  67. function stylizeElement( element ) {
  68. element.style.position = 'absolute';
  69. element.style.bottom = '20px';
  70. element.style.padding = '12px 6px';
  71. element.style.border = '1px solid #fff';
  72. element.style.borderRadius = '4px';
  73. element.style.background = 'rgba(0,0,0,0.1)';
  74. element.style.color = '#fff';
  75. element.style.font = 'normal 13px sans-serif';
  76. element.style.textAlign = 'center';
  77. element.style.opacity = '0.5';
  78. element.style.outline = 'none';
  79. element.style.zIndex = '999';
  80. }
  81. if ( 'xr' in navigator ) {
  82. var button = document.createElement( 'button' );
  83. button.style.display = 'none';
  84. stylizeElement( button );
  85. navigator.xr.requestDevice().then( function ( device ) {
  86. device.supportsSession( { immersive: true, exclusive: true /* DEPRECATED */ } )
  87. .then( function () { showEnterXR( device ); } )
  88. .catch( showVRNotFound );
  89. } ).catch( showVRNotFound );
  90. return button;
  91. } else if ( 'getVRDisplays' in navigator ) {
  92. var button = document.createElement( 'button' );
  93. button.style.display = 'none';
  94. stylizeElement( button );
  95. window.addEventListener( 'vrdisplayconnect', function ( event ) {
  96. showEnterVR( event.display );
  97. }, false );
  98. window.addEventListener( 'vrdisplaydisconnect', function ( event ) {
  99. showVRNotFound();
  100. }, false );
  101. window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
  102. button.textContent = event.display.isPresenting ? 'EXIT VR' : 'ENTER VR';
  103. }, false );
  104. window.addEventListener( 'vrdisplayactivate', function ( event ) {
  105. event.display.requestPresent( [ { source: renderer.domElement } ] );
  106. }, false );
  107. navigator.getVRDisplays()
  108. .then( function ( displays ) {
  109. if ( displays.length > 0 ) {
  110. showEnterVR( displays[ 0 ] );
  111. } else {
  112. showVRNotFound();
  113. }
  114. } ).catch( showVRNotFound );
  115. return button;
  116. } else {
  117. var message = document.createElement( 'a' );
  118. message.href = 'https://webvr.info';
  119. message.innerHTML = 'WEBVR NOT SUPPORTED';
  120. message.style.left = 'calc(50% - 90px)';
  121. message.style.width = '180px';
  122. message.style.textDecoration = 'none';
  123. stylizeElement( message );
  124. return message;
  125. }
  126. },
  127. // DEPRECATED
  128. checkAvailability: function () {
  129. console.warn( 'WEBVR.checkAvailability has been deprecated.' );
  130. return new Promise( function () {} );
  131. },
  132. getMessageContainer: function () {
  133. console.warn( 'WEBVR.getMessageContainer has been deprecated.' );
  134. return document.createElement( 'div' );
  135. },
  136. getButton: function () {
  137. console.warn( 'WEBVR.getButton has been deprecated.' );
  138. return document.createElement( 'div' );
  139. },
  140. getVRDisplay: function () {
  141. console.warn( 'WEBVR.getVRDisplay has been deprecated.' );
  142. }
  143. };