0
0

VRButton.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. class VRButton {
  2. static createButton( renderer, options ) {
  3. if ( options ) {
  4. console.error( 'THREE.VRButton: The "options" parameter has been removed. Please set the reference space type via renderer.xr.setReferenceSpaceType() instead.' );
  5. }
  6. const button = document.createElement( 'button' );
  7. function showEnterVR( /*device*/ ) {
  8. let currentSession = null;
  9. async function onSessionStarted( session ) {
  10. session.addEventListener( 'end', onSessionEnded );
  11. await renderer.xr.setSession( session );
  12. button.textContent = 'EXIT VR';
  13. currentSession = session;
  14. }
  15. function onSessionEnded( /*event*/ ) {
  16. currentSession.removeEventListener( 'end', onSessionEnded );
  17. button.textContent = 'ENTER VR';
  18. currentSession = null;
  19. }
  20. //
  21. button.style.display = '';
  22. button.style.cursor = 'pointer';
  23. button.style.left = 'calc(50% - 50px)';
  24. button.style.width = '100px';
  25. button.textContent = 'ENTER VR';
  26. button.onmouseenter = function () {
  27. button.style.opacity = '1.0';
  28. };
  29. button.onmouseleave = function () {
  30. button.style.opacity = '0.5';
  31. };
  32. button.onclick = function () {
  33. if ( currentSession === null ) {
  34. // WebXR's requestReferenceSpace only works if the corresponding feature
  35. // was requested at session creation time. For simplicity, just ask for
  36. // the interesting ones as optional features, but be aware that the
  37. // requestReferenceSpace call will fail if it turns out to be unavailable.
  38. // ('local' is always available for immersive sessions and doesn't need to
  39. // be requested separately.)
  40. const sessionInit = { optionalFeatures: [ 'local-floor', 'bounded-floor', 'hand-tracking', 'layers' ] };
  41. navigator.xr.requestSession( 'immersive-vr', sessionInit ).then( onSessionStarted );
  42. } else {
  43. currentSession.end();
  44. }
  45. };
  46. }
  47. function disableButton() {
  48. button.style.display = '';
  49. button.style.cursor = 'auto';
  50. button.style.left = 'calc(50% - 75px)';
  51. button.style.width = '150px';
  52. button.onmouseenter = null;
  53. button.onmouseleave = null;
  54. button.onclick = null;
  55. }
  56. function showWebXRNotFound() {
  57. disableButton();
  58. button.textContent = 'VR NOT SUPPORTED';
  59. }
  60. function stylizeElement( element ) {
  61. element.style.position = 'absolute';
  62. element.style.bottom = '20px';
  63. element.style.padding = '12px 6px';
  64. element.style.border = '1px solid #fff';
  65. element.style.borderRadius = '4px';
  66. element.style.background = 'rgba(0,0,0,0.1)';
  67. element.style.color = '#fff';
  68. element.style.font = 'normal 13px sans-serif';
  69. element.style.textAlign = 'center';
  70. element.style.opacity = '0.5';
  71. element.style.outline = 'none';
  72. element.style.zIndex = '999';
  73. }
  74. if ( 'xr' in navigator ) {
  75. button.id = 'VRButton';
  76. button.style.display = 'none';
  77. stylizeElement( button );
  78. navigator.xr.isSessionSupported( 'immersive-vr' ).then( function ( supported ) {
  79. supported ? showEnterVR() : showWebXRNotFound();
  80. } );
  81. return button;
  82. } else {
  83. const message = document.createElement( 'a' );
  84. if ( window.isSecureContext === false ) {
  85. message.href = document.location.href.replace( /^http:/, 'https:' );
  86. message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message
  87. } else {
  88. message.href = 'https://immersiveweb.dev/';
  89. message.innerHTML = 'WEBXR NOT AVAILABLE';
  90. }
  91. message.style.left = 'calc(50% - 90px)';
  92. message.style.width = '180px';
  93. message.style.textDecoration = 'none';
  94. stylizeElement( message );
  95. return message;
  96. }
  97. }
  98. }
  99. export { VRButton };