motor.js/engine/Scene.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 _getIterator = require('babel-runtime/core-js/get-iterator')['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 _tweenJs = require('tween.js');

var _tweenJs2 = _interopRequireDefault(_tweenJs);

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

var _Camera = require('./Camera');

var _Camera2 = _interopRequireDefault(_Camera);

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

var _Utility2 = _interopRequireDefault(_Utility);

var CSS_CLASS_SCENE = 'infamous-dom-scene';

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

var Scene = (function () {

  /**
   * @constructor
   */

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

    this._width = 0;
    this._height = 0;
    this._parentElement = 'body';
    this.element = document.createElement('div');
    this.element.className = CSS_CLASS_SCENE;

    // Add Scene
    this._scene = new _three2['default'].Scene();

    // Add Camera
    this.camera = new _Camera2['default']();

    // Append camera element to scene
    this.element.appendChild(this.camera.element);

    // Mount Scene
    this.mount();

    // Set Size
    this.setSize(window.innerWidth, window.innerHeight);

    // Register window resize hook
    window.addEventListener('resize', this._onWindowResize.bind(this), false);

    // Add Controlls
    this.addTrackballControls();

    // Start the update loop
    this.update();
  }

  /**
   * Method to add child node to the scene
   *
   * @method
   * @memberof Scene
   * @return {null}
   */

  _createClass(Scene, [{
    key: 'addChild',
    value: function addChild(object) {
      this._scene.add(object);
    }

    /**
     * [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;
    }

    /**
     * [render description]
     *
     * @method
     * @memberOf Renderer
     * @param  {[type]} scene  [description]
     * @param  {[type]} camera [description]
     * @return {[type]}        [description]
     */
  }, {
    key: 'render',
    value: function render() {
      var camera = this.camera.get();

      var fov = 0.5 / Math.tan(_three2['default'].Math.degToRad(camera.fov * 0.5)) * this._height;

      if (this.camera.fov !== fov) {
        this.applyStyle('perspective', fov + "px");
        this.camera.fov = fov;
      }

      this._scene.updateMatrixWorld();

      if (camera.parent === undefined) camera.updateMatrixWorld();
      camera.matrixWorldInverse.getInverse(camera.matrixWorld);

      this.camera.setMatrix3d(camera.matrixWorldInverse.elements);
      this.camera.setAlign(this._width / 2, this._height / 2, fov);

      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = _getIterator(this._scene.children), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var child = _step.value;

          child.render(this);
        }
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator['return']) {
            _iterator['return']();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }
    }

    /**
     * [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');

      this.camera.setSize(width, height);
    }

    /**
     * Method to update the scene
     *
     * @todo Currently running this.render() on every frame.. node changes should be passed up
     * so we know when to run render and when not to.
     *
     * @method
     * @memberof Scene
     * @return {null}
     */
  }, {
    key: 'update',
    value: function update() {
      requestAnimationFrame(this.update.bind(this));
      _tweenJs2['default'].update();
      this.render();
      this._controls.update();
    }

    /**
     * Method to run on window resize
     *
     * @method
     * @memberof Scene
     * @return {null}
     */
  }, {
    key: '_onWindowResize',
    value: function _onWindowResize() {
      this._width = window.innerWidth;
      this._height = window.innerHeight;

      var camera = this.camera.get();

      camera.aspect = this._width / this._height;
      camera.updateProjectionMatrix();

      this.setSize(this._width, this._height);

      this.render();
    }

    /**
     * Inject scene into DOM
     * @return {[type]} [description]
     */
  }, {
    key: 'mount',
    value: function mount() {
      (0, _jquery2['default'])(this._parentElement).append(this.element);
    }

    /**
     * Method to add trackball controls for 3D navigation
     *
     * @method
     * @memberof Scene
     * @return {null}
     */
  }, {
    key: 'addTrackballControls',
    value: function addTrackballControls() {
      this._controls = new _three2['default'].TrackballControls(this.camera.get(), this.element);
      this._controls.rotateSpeed = 0.5;
      this._controls.minDistance = 500;
      this._controls.maxDistance = 6000;
      this._controls.addEventListener('change', this.render.bind(this));
    }
  }]);

  return Scene;
})();

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