move scene logic to components (fixes #239, #759, #886)

src/components/index.js

@@ -1,16 +1,21 @@
-require('../components/camera');
-require('../components/cursor');
-require('../components/fog');
-require('../components/geometry');
-require('../components/light');
-require('../components/loader');
-require('../components/look-at');
-require('../components/look-controls');
-require('../components/material');
-require('../components/position');
-require('../components/raycaster');
-require('../components/rotation');
-require('../components/scale');
-require('../components/sound');
-require('../components/visible');
-require('../components/wasd-controls');
+require('./camera');
+require('./cursor');
+require('./geometry');
+require('./light');
+require('./loader');
+require('./look-at');
+require('./look-controls');
+require('./material');
+require('./position');
+require('./raycaster');
+require('./rotation');
+require('./scale');
+require('./sound');
+require('./visible');
+require('./wasd-controls');
+
+require('./scene/canvas');
+require('./scene/fog');
+require('./scene/keyboard-shortcuts');
+require('./scene/stats');
+require('./scene/vr-mode-ui');

src/components/look-controls.js

@@ -69,7 +69,7 @@ module.exports.Component = registerComponent('look-controls', {
   },
 
   addEventListeners: function () {
-    var canvasEl = document.querySelector('a-scene').canvas;
+    var canvasEl = this.el.sceneEl.canvas;
 
     // Mouse Events
     canvasEl.addEventListener('mousedown', this.onMouseDown, false);
@@ -223,7 +223,8 @@ module.exports.Component = registerComponent('look-controls', {
     var deltaY;
     var yawObject = this.yawObject;
     if (!this.touchStarted) { return; }
-    deltaY = 2 * Math.PI * (e.touches[0].pageX - this.touchStart.x) / this.canvasEl.clientWidth;
+    deltaY = 2 * Math.PI * (e.touches[0].pageX - this.touchStart.x) /
+            this.el.sceneEl.canvas.clientWidth;
     // Limits touch orientaion to to yaw (y axis)
     yawObject.rotation.y -= deltaY * 0.5;
     this.touchStart = {

src/components/scene/canvas.js

@@ -0,0 +1,45 @@
+var register = require('../../core/component').registerComponent;
+
+module.exports.Component = register('canvas', {
+  schema: {
+    canvas: {
+      type: 'selector',
+      default: undefined
+    },
+    height: {
+      default: 100
+    },
+    width: {
+      default: 100
+    }
+  },
+
+  update: function () {
+    var data = this.data;
+    var canvas = data.canvas;
+    var scene = this.el;
+
+    // No updating canvas.
+    if (scene.canvas) { return; }
+
+    // Inject canvas if one not specified with height and width.
+    if (!canvas) {
+      canvas = document.createElement('canvas');
+      canvas.classList.add('a-canvas');
+      canvas.style.height = data.height + '%';
+      canvas.style.width = data.width + '%';
+      scene.appendChild(canvas);
+    }
+
+    // Prevent overscroll on mobile.
+    canvas.addEventListener('touchmove', function (event) {
+      event.preventDefault();
+    });
+
+    // Set canvas on scene.
+    scene.canvas = canvas;
+    scene.emit('render-target-loaded', {
+      target: canvas
+    });
+  }
+});

src/components/scene/fog.js

@@ -0,0 +1,73 @@
+var register = require('../../core/component').registerComponent;
+var THREE = require('../../lib/three');
+var debug = require('../../utils/debug');
+
+var warn = debug('components:fog:warn');
+
+/**
+ * Fog component.
+ * Applies only to the scene entity.
+ */
+module.exports.Component = register('fog', {
+  schema: {
+    color: { default: '#000' },
+    density: { default: 0.00025 },
+    far: { default: 1000, min: 0 },
+    near: { default: 1, min: 0 },
+    type: { default: 'linear', oneOf: ['linear', 'exponential'] }
+  },
+
+  update: function () {
+    var data = this.data;
+    var el = this.el;
+    var fog = this.el.object3D.fog;
+
+    if (!el.isScene) {
+      warn('Fog component can only be applied to <a-scene>');
+      return;
+    }
+
+    // (Re)create fog if fog doesn't exist or fog type changed.
+    if (!fog || data.type !== fog.name) {
+      el.object3D.fog = getFog(data);
+      el.updateMaterials();
+      return;
+    }
+
+    // Fog data changed. Update fog.
+    Object.keys(this.schema).forEach(function (key) {
+      var value = data[key];
+      if (key === 'color') { value = new THREE.Color(value); }
+      fog[key] = value;
+    });
+  },
+
+  /**
+   * Remove fog on remove (callback).
+   */
+  remove: function () {
+    var fog = this.el.object3D.fog;
+    if (fog) {
+      fog.density = 0;
+      fog.far = 0;
+      fog.near = 0;
+    }
+  }
+});
+
+/**
+ * Creates a fog object. Sets fog.name to be able to detect fog type changes.
+ *
+ * @param {object} data - Fog data.
+ * @returns {object} fog
+ */
+function getFog (data) {
+  var fog;
+  if (data.type === 'exponential') {
+    fog = new THREE.FogExp2(data.color, data.density);
+  } else {
+    fog = new THREE.Fog(data.color, data.near, data.far);
+  }
+  fog.name = data.type;
+  return fog;
+}

src/components/scene/keyboard-shortcuts.js

@@ -0,0 +1,35 @@
+var registerComponent = require('../../core/component').registerComponent;
+var THREE = require('../../lib/three');
+
+var controls = new THREE.VRControls(new THREE.Object3D());
+
+module.exports.Component = registerComponent('keyboard-shortcuts', {
+  schema: {
+    enterVR: { default: true },
+    resetSensor: { default: true }
+  },
+
+  init: function () {
+    var self = this;
+    var scene = this.el;
+
+    this.listener = window.addEventListener('keyup', function (event) {
+      if (self.enterVREnabled && event.keyCode === 70) {  // f.
+        scene.enterVR();
+      }
+      if (self.resetSensorEnabled && event.keyCode === 90) {  // z.
+        controls.resetSensor();
+      }
+    }, false);
+  },
+
+  update: function (oldData) {
+    var data = this.data;
+    this.enterVREnabled = data.enterVR;
+    this.resetSensorEnabled = data.resetSensor;
+  },
+
+  remove: function () {
+    window.removeEventListener('keyup', this.listener);
+  }
+});

src/components/scene/stats.js

@@ -0,0 +1,55 @@
+var registerComponent = require('../../core/component').registerComponent;
+var RStats = require('../../../vendor/rStats');
+
+var HIDDEN_CLASS = 'a-hidden';
+
+/**
+ * Stats appended to document.body by RStats.
+ */
+module.exports.Component = registerComponent('stats', {
+  init: function () {
+    var scene = this.el;
+
+    this.stats = createStats();
+    this.statsEl = document.querySelector('.rs-base');
+
+    this.hideBound = this.hide.bind(this);
+    this.showBound = this.show.bind(this);
+
+    scene.addEventListener('enter-vr', this.hideBound);
+    scene.addEventListener('exit-vr', this.showBound);
+  },
+
+  remove: function () {
+    this.el.removeEventListener('enter-vr', this.hideBound);
+    this.el.removeEventListener('exit-vr', this.showBound);
+    this.statsEl.parentNode.removeChild(this.statsEl);
+  },
+
+  tick: function () {
+    var stats = this.stats;
+    stats('rAF').tick();
+    stats('FPS').frame();
+    stats().update();
+  },
+
+  hide: function () {
+    this.statsEl.classList.add(HIDDEN_CLASS);
+  },
+
+  show: function () {
+    this.statsEl.classList.remove(HIDDEN_CLASS);
+  }
+});
+
+function createStats () {
+  return new RStats({
+    CSSPath: '../../style/',
+    values: {
+      fps: { caption: 'fps', below: 30 }
+    },
+    groups: [
+      { caption: 'Framerate', values: [ 'fps', 'raf' ] }
+    ]
+  });
+}