infamous/core/WebVR.js

A CSS3D/WebGL UI library.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
// adapted from Three.js, r88, https://github.com/mrdoob/three.js/blob/r88/examples/js/vr/WebVR.js

/**
 * @author mrdoob / http://mrdoob.com
 * @author Mugen87 / https://github.com/Mugen87
 *
 * Based on @tojiro's vr-samples-utils.js
 */
var WEBVR = {
  createButton: function (renderer) {
    function showEnterVR(display) {
      button.style.display = '';
      button.style.cursor = 'pointer';
      button.style.left = 'calc(50% - 50px)';
      button.style.width = '100px';
      button.textContent = 'ENTER VR';

      button.onmouseenter = function () {
        button.style.opacity = '1.0';
      };

      button.onmouseleave = function () {
        button.style.opacity = '0.5';
      };

      button.onclick = function () {
        display.isPresenting ? display.exitPresent() : display.requestPresent([{
          source: renderer.domElement
        }]);
      };

      renderer.vr.setDevice(display);
    }

    function showVRNotFound() {
      button.style.display = '';
      button.style.cursor = 'auto';
      button.style.left = 'calc(50% - 75px)';
      button.style.width = '150px';
      button.textContent = 'VR NOT FOUND';
      button.onmouseenter = null;
      button.onmouseleave = null;
      button.onclick = null;
      renderer.vr.setDevice(null);
    }

    function stylizeElement(element) {
      element.style.position = 'absolute';
      element.style.bottom = '20px';
      element.style.padding = '12px 6px';
      element.style.border = '1px solid #fff';
      element.style.borderRadius = '4px';
      element.style.background = 'transparent';
      element.style.color = '#fff';
      element.style.font = 'normal 13px sans-serif';
      element.style.textAlign = 'center';
      element.style.opacity = '0.5';
      element.style.outline = 'none';
      element.style.zIndex = '999';
    }

    if ('getVRDisplays' in navigator) {
      var button = document.createElement('button');
      button.style.display = 'none';
      stylizeElement(button);
      window.addEventListener('vrdisplayconnect', function (event) {
        showEnterVR(event.display);
      }, false);
      window.addEventListener('vrdisplaydisconnect', function (event) {
        showVRNotFound();
      }, false);
      window.addEventListener('vrdisplaypresentchange', function (event) {
        button.textContent = event.display.isPresenting ? 'EXIT VR' : 'ENTER VR';
      }, false);
      navigator.getVRDisplays().then(function (displays) {
        if (displays.length > 0) {
          showEnterVR(displays[0]);
        } else {
          showVRNotFound();
        }
      });
      return button;
    } else {
      var message = document.createElement('a');
      message.href = 'https://webvr.info';
      message.innerHTML = 'WEBVR NOT SUPPORTED';
      message.style.left = 'calc(50% - 90px)';
      message.style.width = '180px';
      message.style.textDecoration = 'none';
      stylizeElement(message);
      return message;
    }
  },
  // DEPRECATED
  checkAvailability: function () {
    console.warn('WEBVR.checkAvailability has been deprecated.');
    return new Promise(function () {});
  },
  getMessageContainer: function () {
    console.warn('WEBVR.getMessageContainer has been deprecated.');
    return document.createElement('div');
  },
  getButton: function () {
    console.warn('WEBVR.getButton has been deprecated.');
    return document.createElement('div');
  },
  getVRDisplay: function () {
    console.warn('WEBVR.getVRDisplay has been deprecated.');
  }
};
var _default = WEBVR;
exports.default = _default;