motor.js/engine/Camera.js

A rendering Engine for the web.

'use strict';

var _createClass = require('babel-runtime/helpers/create-class')['default'];

var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default'];

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];

Object.defineProperty(exports, '__esModule', {
  value: true
});

var _three = require('three');

var _three2 = _interopRequireDefault(_three);

var _Utility = require('./Utility');

var _Utility2 = _interopRequireDefault(_Utility);

var CSS_CLASS_CAMERA = 'infamous-dom-camera';

/**
 * Camera Class
 * @class Camera
 * @return {Camera} A new instance of Camera
 */

var Camera = (function () {

  /**
   * @constructor
   */

  function Camera() {
    _classCallCheck(this, Camera);

    this.fov = 0;
    this._style = '';
    this._width = window.innerWidth;
    this._height = window.innerHeight;

    this._styleCache = {
      transform: {
        matrix3d: [],
        translate3d: []
      }
    };

    this.element = document.createElement('div');
    this.element.className = CSS_CLASS_CAMERA;

    this._camera = new _three2['default'].PerspectiveCamera(40, this._width / this._height, 1, 10000);
    this._camera.position.z = 3000;
  }

  /**
   * [setAlign description]
   * @param {[type]} x [description]
   * @param {[type]} y [description]
   * @param {[type]} z [description]
   */

  _createClass(Camera, [{
    key: 'setAlign',
    value: function setAlign(x, y, z) {
      var align = [x, y, z];

      if (align != this._styleCache.transform.translate3d) {
        this._styleCache.transform.translate3d = align;
        this.applyTransform();
      }
    }

    /**
     * [setMatrix3d description]
     * @param {[type]} matrix [description]
     */
  }, {
    key: 'setMatrix3d',
    value: function setMatrix3d(matrix) {
      if (this._styleCache.transform.matrix3d != matrix) {
        this._styleCache.transform.matrix3d = matrix;
        this.applyTransform();
      }
    }

    /**
     * [setSize description]
     *
     * @method
     * @memberOf Renderer
     * @param {[type]} width  [description]
     * @param {[type]} height [description]
     */
  }, {
    key: 'setSize',
    value: function setSize(width, height) {
      this._width = width;
      this._height = height;

      this.applyStyle('width', width + 'px');
      this.applyStyle('height', height + 'px');
    }

    /**
     * [applyTransform description]
     * @return {[type]} [description]
     */
  }, {
    key: 'applyTransform',
    value: function applyTransform() {
      var translate3d = this._styleCache.transform.translate3d;
      var matrix3d = this._styleCache.transform.matrix3d;

      var transform = '\n      translate3d(\n        0,\n        0,\n        ' + _Utility2['default'].applyCSSLabel(translate3d[2], 'px') + '\n      )\n\n      matrix3d(\n        ' + _Utility2['default'].epsilon(matrix3d[0]) + ',\n        ' + _Utility2['default'].epsilon(-matrix3d[1]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[2]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[3]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[4]) + ',\n        ' + _Utility2['default'].epsilon(-matrix3d[5]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[6]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[7]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[8]) + ',\n        ' + _Utility2['default'].epsilon(-matrix3d[9]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[10]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[11]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[12]) + ',\n        ' + _Utility2['default'].epsilon(-matrix3d[13]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[14]) + ',\n        ' + _Utility2['default'].epsilon(matrix3d[15]) + '\n      )\n\n      translate3d(\n        ' + _Utility2['default'].applyCSSLabel(translate3d[0], 'px') + ',\n        ' + _Utility2['default'].applyCSSLabel(translate3d[1], 'px') + ',\n        0\n      )\n    ';

      this.applyStyle('transform', transform);
    }

    /**
     * [applyStyle description]
     * @param  {[type]} property [description]
     * @param  {[type]} value    [description]
     * @return {[type]}          [description]
     */
  }, {
    key: 'applyStyle',
    value: function applyStyle(property, value) {
      this.element.style[property] = value;
    }

    /**
     * [get description]
     * @return {[type]} [description]
     */
  }, {
    key: 'get',
    value: function get() {
      return this._camera;
    }
  }]);

  return Camera;
})();

exports['default'] = Camera;
module.exports = exports['default'];
//# sourceMappingURL=Camera.js.map