Added progress bar

js/l3d/src/loaders/ProgressiveLoader.js

@@ -65,6 +65,12 @@ var _parseList = function(arr) {
         ret.texCoordsExist = arr[4];
         ret.normalsExist = arr[5];
 
+    } else if (arr[0] === 'g') {
+
+        ret.type = "global";
+        ret.index = null;
+        ret.numberOfElements = arr[1];
+
     }
 
     return ret;
@@ -81,7 +87,7 @@ var _parseList = function(arr) {
  * @constructor
  * @memberOf L3D
  */
-var ProgressiveLoader = function(path, scene, camera, callback) {
+var ProgressiveLoader = function(path, scene, camera, callback, log) {
 
     /**
      * Path to the .obj file
@@ -178,6 +184,27 @@ var ProgressiveLoader = function(path, scene, camera, callback) {
      */
     this.camera = camera;
 
+
+    /**
+     * Number of total elements for loading
+     * @type{Number}
+     */
+    this.numberOfElements = -1;
+
+    /**
+     * Number of elements received
+     * @type {Number}
+     */
+    this.numberOfElementsReceived = -1;
+
+    /**
+     * Modulus indicator (not to log too often)
+     * @type {Number}
+     */
+    this.modulus = 150;
+
+    this.log = log;
+
 };
 
 /**
@@ -216,26 +243,19 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
     var self = this;
 
     this.socket.on('ok', function() {
-        console.log('ok');
         self.socket.emit('materials');
     });
 
     this.socket.on('elements', function(arr) {
 
-        if (arr.length === 0) {
-
-            console.log("Empty array");
-
-        } else {
-
-            console.log("Stuff received");
-
-        }
-
-
-        // console.log("Received elements for the " + (++self.counter) + "th time !");
         for (var i = 0; i < arr.length; i++) {
 
+            self.numberOfElementsReceived++;
+
+            if (typeof self.log === 'function' && self.numberOfElementsReceived % self.modulus === 0) {
+                self.log(self.numberOfElementsReceived, self.numberOfElements);
+            }
+
             var elt = _parseList(arr[i]);
 
             // console.log(elts);
@@ -346,6 +366,11 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
                 }
 
 
+            } else if (elt.type === 'global') {
+
+                self.numberOfElements = elt.numberOfElements;
+                self.modulus = Math.floor(self.numberOfElements / 200);
+
             }
 
         }
@@ -356,6 +381,7 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
 
     this.socket.on('disconnect', function() {
         console.log('Finished !');
+        self.log(self.numberOfElements, self.numberOfElements);
         self.finished = true;
     });
 };

js/l3d/src/scenes/initScene.js

@@ -1,3 +1,9 @@
+L3D.LogFunction = function(a,b) {
+    var val = 100*a/b;
+    $('.progress-bar').css('width', val+'%').attr('aria-valuenow', val);
+    $('#percentage').html(Math.floor(10*val)/10 + '%');
+}
+
 L3D.addLight = function(scene) {
     var directional_light = new THREE.DirectionalLight(0xdddddd);
     directional_light.position.set(1, 2.5, 1).normalize();
@@ -25,7 +31,8 @@ L3D.initPeachCastle = function(scene, collidableObjects, recommendation) {
                 object.raycastable = false;
                 object.material.side = THREE.FrontSide;
             }
-        }
+        },
+        L3D.LogFunction
     );
     loader.load();
 
@@ -161,7 +168,8 @@ L3D.initBobombScene = function(scene, collidableObjects, recommendation) {
                 object.material.name === 'Material.070_41A41EE3_c.bmp') {
                 THREEx.Transparency.push(object);
             }
-        }
+        },
+        L3D.LogFunction
     );
 
     loader.load();
@@ -314,7 +322,8 @@ L3D.initWhompScene = function(scene, collidableObjects, recommendation) {
                 object.visible = false;
             }
 
-        }
+        },
+        L3D.LogFunction
     );
 
     loader.load();
@@ -489,7 +498,8 @@ L3D.initMountainScene = function(scene, collidableObjects, recommendation) {
                 THREEx.Transparency.push(object);
                 object.material.opacity = 0.5;
             }
-        }
+        },
+        L3D.LogFunction
     );
 
     loader.load();
@@ -631,15 +641,16 @@ L3D.initSponzaScene = function(scene, collidableObjects, recommendation) {
 
             obj.raycastable = true;
 
-        }
+        },
+        L3D.LogFunction
     );
 
     l = loader;
     loader.load();
 
 
-    loader.getRecommendation = function() {
-        var ret = loader.recommendation.toList();
+    loader.getCamera = function() {
+        var ret = loader.camera.toList();
         ret[0][0] *= 10;
         ret[0][1] *= 10;
         ret[0][2] *= 10;