react360vidthree/dist/index.js

A 360 video view react component

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var THREE = require('three');
var OrbitControls = require('three/examples/jsm/controls/OrbitControls');

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var inherits = function (subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};

var possibleConstructorReturn = function (self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return call && (typeof call === "object" || typeof call === "function") ? call : self;
};

var Video360Three = function (_Component) {
  inherits(Video360Three, _Component);

  function Video360Three() {
    var _ref;

    var _temp, _this, _ret;

    classCallCheck(this, Video360Three);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Video360Three.__proto__ || Object.getPrototypeOf(Video360Three)).call.apply(_ref, [this].concat(args))), _this), _this.sceneSetup = function () {
      // get container dimensions and use them for scene sizing
      var width = _this.el.clientWidth;
      var height = _this.el.clientHeight;

      _this.scene = new THREE.Scene();
      _this.camera = new THREE.PerspectiveCamera(75, // fov = field of view
      width / height, // aspect ratio
      0.1, // near plane
      1000 // far plane
      );

      _this.camera.target = new THREE.Vector3(0, 0, 0);

      _this.camera.position.z = 5; // is used here to set some distance from a cube that is located at z = 0
      // OrbitControls allow a camera to orbit around the object
      // https://threejs.org/docs/#examples/controls/OrbitControls
      _this.controls = new OrbitControls.OrbitControls(_this.camera, _this.el);
      _this.renderer = new THREE.WebGLRenderer();
      _this.renderer.setSize(width, height);
      _this.el.appendChild(_this.renderer.domElement); // mount using React ref
    }, _this.addCustomSceneObjects = function () {
      var video = document.getElementById(_this.props.Id);
      video.play();

      var texture = new THREE.VideoTexture(video);

      var material = new THREE.MeshBasicMaterial({ map: texture });

      var geometry = new THREE.SphereBufferGeometry(500, 60, 40);

      // invert the geometry on the x-axis so that all of the faces point inward
      geometry.scale(-1, 1, 1);

      _this.cube = new THREE.Mesh(geometry, material);

      //const mesh = new THREE.Mesh(geometry, material);

      _this.scene.add(_this.cube);
    }, _this.startAnimationLoop = function () {
      if (_this.props.autoRotate === "true") {
        _this.cube.rotation.y += 0.0009;
      }

      _this.renderer.render(_this.scene, _this.camera);

      // The window.requestAnimationFrame() method tells the browser that you wish to perform
      // an animation and requests that the browser call a specified function
      // to update an animation before the next repaint
      _this.requestID = window.requestAnimationFrame(_this.startAnimationLoop);
    }, _this.handleWindowResize = function () {
      var width = _this.el.clientWidth;
      var height = _this.el.clientHeight;

      _this.renderer.setSize(width, height);
      _this.camera.aspect = width / height;

      // Note that after making changes to most of camera properties you have to call
      // .updateProjectionMatrix for the changes to take effect.
      _this.camera.updateProjectionMatrix();
    }, _temp), possibleConstructorReturn(_this, _ret);
  }

  createClass(Video360Three, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.addVideoPlayer();
      this.sceneSetup();
      this.addCustomSceneObjects();
      this.startAnimationLoop();
      window.addEventListener("resize", this.handleWindowResize);
    }

    // Add a hidden video player object in document body

  }, {
    key: "addVideoPlayer",
    value: function addVideoPlayer() {
      var vNode = document.createElement("video");
      vNode.setAttribute("id", this.props.Id);
      vNode.setAttribute("loop", "true");
      vNode.muted = true;
      vNode.setAttribute("crossorigin", "anonymous");
      vNode.setAttribute("playsinline", "true");
      vNode.setAttribute("src", this.props.src);
      vNode.setAttribute("type", "video/mp4");
      vNode.style.display = "none";
      document.body.appendChild(vNode);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener("resize", this.handleWindowResize);
      window.cancelAnimationFrame(this.requestID);
      this.controls.dispose();
    }

    // Standard scene setup in Three.js. Check "Creating a scene" manual for more information
    // https://threejs.org/docs/#manual/en/introduction/Creating-a-scene


    // Here should come custom code.

  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      return React__default.createElement("div", {
        style: {
          width: Number(this.props.width),
          height: Number(this.props.height)
        },
        ref: function ref(_ref2) {
          return _this2.el = _ref2;
        }
      });
    }
  }]);
  return Video360Three;
}(React.Component);

module.exports = Video360Three;
//# sourceMappingURL=index.js.map