Add configurable loading screen.

Author: dmarcos

docs/components/loader.md

@@ -0,0 +1,32 @@
+---
+title: loader
+type: components
+layout: docs
+parent_section: components
+examples: []
+---
+
+The loader component configures the loading screen visual style.
+
+To configure the style of the loader title bar one can redefine `.a-loader-title` style. The example below sets the text color to red:
+
+```css
+ .a-loader-title {
+   color: red;
+ }
+```
+
+## Example
+
+The example below sets the background color to black and dots color to red.
+
+```html
+<a-scene loader="dotsColor: red; backgroundColor: black"></a-scene>
+```
+
+## Properties
+
+| Property        | Description                                               | Default Value |
+|-----------------|-----------------------------------------------------------|---------------|
+| dotsColor       | Loader dots color.                                        | white         |
+| backgroundColor | Loader background color.                                  | #24CAFF       |

src/core/scene/a-scene.js

@@ -15,8 +15,11 @@ var bind = utils.bind;
 var isIOS = utils.device.isIOS();
 var isMobile = utils.device.isMobile();
 var registerElement = re.registerElement;
+var styleParser = utils.styleParser;
 var warn = utils.debug('core:a-scene:warn');
 
+var LOADER_TITLE_CLASS = 'a-loader-title';
+
 /**
  * Scene element, holds all entities.
  *
@@ -507,6 +510,80 @@ module.exports.AScene = registerElement('a-scene', {
       writable: true
     },
 
+    setupLoader: {
+      value: function () {
+        var self = this;
+        var loaderAttribute = this.hasAttribute('loader') ? styleParser.parse(this.getAttribute('loader')) : undefined;
+        var dotsColor = loaderAttribute && loaderAttribute.dotsColor || 'white';
+        var backgroundColor = loaderAttribute && loaderAttribute.backgroundColor || '#24CAFF';
+        var loaderScene = new THREE.Scene();
+        var sphereGeometry = new THREE.SphereGeometry(0.20, 36, 18, 0, 2 * Math.PI, 0, Math.PI);
+        var sphereMaterial = new THREE.MeshBasicMaterial({color: dotsColor});
+        var sphereMesh1 = new THREE.Mesh(sphereGeometry, sphereMaterial);
+        var sphereMesh2 = sphereMesh1.clone();
+        var sphereMesh3 = sphereMesh1.clone();
+        var camera = this.loaderCamera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.0005, 10000);
+        var clock = new THREE.Clock();
+        var time = 0;
+        var render = function () {
+          self.renderer.render(loaderScene, camera);
+          time = clock.getElapsedTime() % 4;
+          sphereMesh1.visible = time >= 1;
+          sphereMesh2.visible = time >= 2;
+          sphereMesh3.visible = time >= 3;
+        };
+
+        loaderScene.background = new THREE.Color(backgroundColor);
+        loaderScene.add(camera);
+        sphereMesh1.position.set(-1, 0, -15);
+        sphereMesh2.position.set(0, 0, -15);
+        sphereMesh3.position.set(1, 0, -15);
+        camera.add(sphereMesh1);
+        camera.add(sphereMesh2);
+        camera.add(sphereMesh3);
+
+        // Delay 200ms to avoid loader flashes.
+        setTimeout(function () {
+          if (self.hasLoaded) { return; }
+          self.setupLoaderTitle();
+          self.resizeLoader = bind(self.resizeLoader, self);
+          self.resizeLoader();
+          window.addEventListener('resize', self.resizeLoader);
+          self.renderer.setAnimationLoop(render);
+        }, 200);
+      }
+    },
+
+    setupLoaderTitle: {
+      value: function () {
+        var title = this.titleEl = document.createElement('div');
+        title.className = LOADER_TITLE_CLASS;
+        title.innerHTML = document.title;
+        this.appendChild(title);
+      }
+    },
+
+    resizeLoader: {
+      value: function () {
+        var camera = this.loaderCamera;
+        var size = getCanvasSize(this.canvas, false, this.maxCanvasSize, this.is('vr-mode'));
+        camera.aspect = size.width / size.height;
+        camera.updateProjectionMatrix();
+         // Notify renderer of size change.
+        this.renderer.setSize(size.width, size.height, false);
+      },
+      writable: true
+    },
+
+    removeLoader: {
+      value: function () {
+        window.removeEventListener('resize', this.resizeLoader);
+        if (!this.titleEl) { return; }
+        // Hide title.
+        this.titleEl.style.display = 'none';
+      }
+    },
+
     setupRenderer: {
       value: function () {
         var self = this;
@@ -551,6 +628,8 @@ module.exports.AScene = registerElement('a-scene', {
         this.addEventListener('camera-set-active', function () {
           renderer.vr.setPoseTarget(self.camera);
         });
+
+        this.setupLoader();
       },
       writable: window.debug
     },
@@ -580,6 +659,7 @@ module.exports.AScene = registerElement('a-scene', {
           if (sceneEl.renderer) {
             if (window.performance) { window.performance.mark('render-started'); }
             sceneEl.clock = new THREE.Clock();
+            sceneEl.removeLoader();
             sceneEl.render();
             sceneEl.renderStarted = true;
             sceneEl.emit('renderstart');

src/style/aframe.css

@@ -264,3 +264,18 @@ a-scene audio {
   text-indent: -9999px;
   width: 50px;
 }
+
+.a-loader-title {
+  background-color: rgba(0, 0, 0, 0.6);
+  font-family: sans-serif, monospace;
+  text-align: center;
+  font-size: 20px;
+  height: 50px;
+  font-weight: 300;
+  line-height: 50px;
+  position: absolute;
+  right: 0px;
+  left: 0px;
+  top: 0px;
+  color: white;
+}