WebVR.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /**
  2. * @author mrdoob / http://mrdoob.com
  3. * Based on @tojiro's vr-samples-utils.js
  4. */
  5. var WEBVR = {
  6. isLatestAvailable: function () {
  7. console.warn( 'WEBVR: isLatestAvailable() is being deprecated. Use .isAvailable() instead.' );
  8. return this.isAvailable();
  9. },
  10. isAvailable: function () {
  11. return navigator.getVRDisplays !== undefined;
  12. },
  13. getDisplays: function () {
  14. return navigator.getVRDisplays();
  15. },
  16. getMessage: function () {
  17. var message;
  18. if ( navigator.getVRDisplays ) {
  19. navigator.getVRDisplays().then( function ( displays ) {
  20. if ( displays.length === 0 ) message = 'WebVR supported, but no VRDisplays found.';
  21. } );
  22. } else {
  23. message = 'Your browser does not support WebVR. See <a href="http://webvr.info">webvr.info</a> for assistance.';
  24. }
  25. if ( message !== undefined ) {
  26. var container = document.createElement( 'div' );
  27. container.style.position = 'absolute';
  28. container.style.left = '0';
  29. container.style.top = '0';
  30. container.style.right = '0';
  31. container.style.zIndex = '999';
  32. container.align = 'center';
  33. var error = document.createElement( 'div' );
  34. error.style.fontFamily = 'sans-serif';
  35. error.style.fontSize = '16px';
  36. error.style.fontStyle = 'normal';
  37. error.style.lineHeight = '26px';
  38. error.style.backgroundColor = '#fff';
  39. error.style.color = '#000';
  40. error.style.padding = '10px 20px';
  41. error.style.margin = '50px';
  42. error.style.display = 'inline-block';
  43. error.innerHTML = message;
  44. container.appendChild( error );
  45. return container;
  46. }
  47. },
  48. getButton: function ( effect ) {
  49. var button = document.createElement( 'button' );
  50. button.style.position = 'absolute';
  51. button.style.left = 'calc(50% - 50px)';
  52. button.style.bottom = '20px';
  53. button.style.width = '100px';
  54. button.style.border = '0';
  55. button.style.padding = '8px';
  56. button.style.cursor = 'pointer';
  57. button.style.backgroundColor = '#000';
  58. button.style.color = '#fff';
  59. button.style.fontFamily = 'sans-serif';
  60. button.style.fontSize = '13px';
  61. button.style.fontStyle = 'normal';
  62. button.style.textAlign = 'center';
  63. button.style.zIndex = '999';
  64. button.textContent = 'ENTER VR';
  65. button.onclick = function() {
  66. effect.isPresenting ? effect.exitPresent() : effect.requestPresent();
  67. };
  68. window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
  69. button.textContent = effect.isPresenting ? 'EXIT VR' : 'ENTER VR';
  70. }, false );
  71. return button;
  72. }
  73. };