WebVR.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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. getMessage: function () {
  14. var message;
  15. if ( navigator.getVRDisplays ) {
  16. navigator.getVRDisplays().then( function ( displays ) {
  17. if ( displays.length === 0 ) message = 'WebVR supported, but no VRDisplays found.';
  18. } );
  19. } else {
  20. message = 'Your browser does not support WebVR. See <a href="http://webvr.info">webvr.info</a> for assistance.';
  21. }
  22. if ( message !== undefined ) {
  23. var container = document.createElement( 'div' );
  24. container.style.position = 'absolute';
  25. container.style.left = '0';
  26. container.style.top = '0';
  27. container.style.right = '0';
  28. container.style.zIndex = '999';
  29. container.align = 'center';
  30. var error = document.createElement( 'div' );
  31. error.style.fontFamily = 'sans-serif';
  32. error.style.fontSize = '16px';
  33. error.style.fontStyle = 'normal';
  34. error.style.lineHeight = '26px';
  35. error.style.backgroundColor = '#fff';
  36. error.style.color = '#000';
  37. error.style.padding = '10px 20px';
  38. error.style.margin = '50px';
  39. error.style.display = 'inline-block';
  40. error.innerHTML = message;
  41. container.appendChild( error );
  42. return container;
  43. }
  44. },
  45. getButton: function ( effect ) {
  46. var button = document.createElement( 'button' );
  47. button.style.position = 'absolute';
  48. button.style.left = 'calc(50% - 50px)';
  49. button.style.bottom = '20px';
  50. button.style.width = '100px';
  51. button.style.border = '0';
  52. button.style.padding = '8px';
  53. button.style.cursor = 'pointer';
  54. button.style.backgroundColor = '#000';
  55. button.style.color = '#fff';
  56. button.style.fontFamily = 'sans-serif';
  57. button.style.fontSize = '13px';
  58. button.style.fontStyle = 'normal';
  59. button.style.textAlign = 'center';
  60. button.style.zIndex = '999';
  61. button.textContent = 'ENTER VR';
  62. button.onclick = function() {
  63. effect.isPresenting ? effect.exitPresent() : effect.requestPresent();
  64. };
  65. window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
  66. button.textContent = effect.isPresenting ? 'EXIT VR' : 'ENTER VR';
  67. }, false );
  68. return button;
  69. }
  70. };