XRButton.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. class XRButton {
  2. static createButton( renderer ) {
  3. const button = document.createElement( 'button' );
  4. function showStartXR( mode ) {
  5. let currentSession = null;
  6. async function onSessionStarted( session ) {
  7. session.addEventListener( 'end', onSessionEnded );
  8. await renderer.xr.setSession( session );
  9. button.textContent = 'STOP XR';
  10. currentSession = session;
  11. }
  12. function onSessionEnded( /*event*/ ) {
  13. currentSession.removeEventListener( 'end', onSessionEnded );
  14. button.textContent = 'START XR';
  15. currentSession = null;
  16. }
  17. //
  18. button.style.display = '';
  19. button.style.cursor = 'pointer';
  20. button.style.left = 'calc(50% - 50px)';
  21. button.style.width = '100px';
  22. button.textContent = 'START XR';
  23. button.onmouseenter = function () {
  24. button.style.opacity = '1.0';
  25. };
  26. button.onmouseleave = function () {
  27. button.style.opacity = '0.5';
  28. };
  29. button.onclick = function () {
  30. if ( currentSession === null ) {
  31. const sessionInit = {
  32. optionalFeatures: [
  33. 'local-floor',
  34. 'bounded-floor',
  35. 'hand-tracking',
  36. 'layers'
  37. ]
  38. };
  39. navigator.xr.requestSession( mode, sessionInit )
  40. .then( onSessionStarted );
  41. } else {
  42. currentSession.end();
  43. }
  44. };
  45. }
  46. function disableButton() {
  47. button.style.display = '';
  48. button.style.cursor = 'auto';
  49. button.style.left = 'calc(50% - 75px)';
  50. button.style.width = '150px';
  51. button.onmouseenter = null;
  52. button.onmouseleave = null;
  53. button.onclick = null;
  54. }
  55. function showXRNotSupported() {
  56. disableButton();
  57. button.textContent = 'XR NOT SUPPORTED';
  58. }
  59. function showXRNotAllowed( exception ) {
  60. disableButton();
  61. console.warn( 'Exception when trying to call xr.isSessionSupported', exception );
  62. button.textContent = 'XR NOT ALLOWED';
  63. }
  64. function stylizeElement( element ) {
  65. element.style.position = 'absolute';
  66. element.style.bottom = '20px';
  67. element.style.padding = '12px 6px';
  68. element.style.border = '1px solid #fff';
  69. element.style.borderRadius = '4px';
  70. element.style.background = 'rgba(0,0,0,0.1)';
  71. element.style.color = '#fff';
  72. element.style.font = 'normal 13px sans-serif';
  73. element.style.textAlign = 'center';
  74. element.style.opacity = '0.5';
  75. element.style.outline = 'none';
  76. element.style.zIndex = '999';
  77. }
  78. if ( 'xr' in navigator ) {
  79. button.id = 'XRButton';
  80. button.style.display = 'none';
  81. stylizeElement( button );
  82. navigator.xr.isSessionSupported( 'immersive-ar' )
  83. .then( function ( supported ) {
  84. if ( supported ) {
  85. showStartXR( 'immersive-ar' );
  86. } else {
  87. navigator.xr.isSessionSupported( 'immersive-vr' )
  88. .then( function ( supported ) {
  89. if ( supported ) {
  90. showStartXR( 'immersive-vr' );
  91. } else {
  92. showXRNotSupported();
  93. }
  94. } ).catch( showXRNotAllowed );
  95. }
  96. } ).catch( showXRNotAllowed );
  97. return button;
  98. } else {
  99. const message = document.createElement( 'a' );
  100. if ( window.isSecureContext === false ) {
  101. message.href = document.location.href.replace( /^http:/, 'https:' );
  102. message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message
  103. } else {
  104. message.href = 'https://immersiveweb.dev/';
  105. message.innerHTML = 'WEBXR NOT AVAILABLE';
  106. }
  107. message.style.left = 'calc(50% - 90px)';
  108. message.style.width = '180px';
  109. message.style.textDecoration = 'none';
  110. stylizeElement( message );
  111. return message;
  112. }
  113. }
  114. }
  115. export { XRButton };