Added download/progress feedback in all examples

examples/js/loaders/WWOBJLoader2.js

@@ -600,7 +600,7 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
 		for ( var index in this.callbacks.progress ) {
 
 			callbackProgress = this.callbacks.progress[ index ];
-			callbackProgress( output );
+			callbackProgress( output, this.instanceNo );
 
 		}
 

examples/webgl_loader_obj2.html

@@ -85,6 +85,8 @@
 
 			var OBJLoader2Example = (function () {
 
+				var Validator = THREE.OBJLoader2.prototype._getValidator();
+
 				function OBJLoader2Example( elementToBindTo ) {
 					this.renderer = null;
 					this.canvas = elementToBindTo;
@@ -109,6 +111,8 @@
 
 					this.cube = null;
 					this.pivot = null;
+
+					this.feedbackArray = [];
 				}
 
 				OBJLoader2Example.prototype.initGL = function () {
@@ -157,6 +161,7 @@
 				OBJLoader2Example.prototype.loadObj = function ( objDef ) {
 					this.scene.add( objDef.pivot );
 					var scope = this;
+					scope._reportProgress( 'Loading: ' + objDef.fileObj, objDef.instanceNo );
 
 					var mtlLoader = new THREE.MTLLoader();
 					mtlLoader.setPath( objDef.texturePath );
@@ -174,6 +179,7 @@
 
 						var onSuccess = function ( object3d ) {
 							console.log( 'Loading complete. Meshes were attached to: ' + object3d.name );
+							scope._reportProgress( '', objDef.instanceNo );
 						};
 
 						var onProgress = function ( event ) {
@@ -181,13 +187,13 @@
 
 								var percentComplete = event.loaded / event.total * 100;
 								var output = 'Download of "' + objDef.fileObj + '": ' + Math.round( percentComplete ) + '%';
-								console.log(output);
-
+								scope._reportProgress( output, objDef.instanceNo );
 							}
 						};
 
 						var onError = function ( event ) {
-							console.error( 'Error of type "' + event.type + '" occurred when trying to load: ' + event.src );
+							var output = 'Error of type "' + event.type + '" occurred when trying to load: ' + event.src;
+							scope._reportProgress( output, objDef.instanceNo );
 						};
 
 						objLoader.load( objDef.fileObj, onSuccess, onProgress, onError );
@@ -195,6 +201,13 @@
 					});
 				};
 
+				OBJLoader2Example.prototype._reportProgress = function( text, instanceNo ) {
+					this.feedbackArray[ instanceNo ] = text;
+					console.log( 'Progress: ' + text );
+
+					document.getElementById( 'feedback' ).innerHTML = Validator.isValid( this.feedbackArray ) && this.feedbackArray.length > 0 ? this.feedbackArray.join( '\<br\>' ) : '';
+				};
+
 				OBJLoader2Example.prototype.resizeDisplayGL = function () {
 					this.controls.handleResize();
 
@@ -342,7 +355,8 @@
 			app.loadObj( {
 				path: 'obj/female02/',
 				fileObj: 'female02_vertex_colors.obj',
-				pivot: pivotA
+				pivot: pivotA,
+				instanceNo: 0
 			} );
 
 			var pivotB = new THREE.Object3D();
@@ -353,7 +367,8 @@
 				fileObj: 'female02.obj',
 				texturePath: 'obj/female02/',
 				fileMtl: 'female02.mtl',
-				pivot: pivotB
+				pivot: pivotB,
+				instanceNo: 1
 			} );
 
 			render();

examples/webgl_loader_obj2_ww.html

@@ -179,9 +179,7 @@
 				};
 
 				WWOBJLoader2Example.prototype.initPostGL = function () {
-					var reportProgress = function ( content ) {
-						console.log( 'Progress: ' + content );
-					};
+					var scope = this;
 					var materialsLoaded = function ( materials ) {
 						var count = Validator.isValid( materials ) ? materials.length : 0;
 						console.log( 'Loaded #' + count + ' materials.' );
@@ -191,8 +189,9 @@
 					};
 					var completedLoading = function () {
 						console.log( 'Loading complete!' );
+						scope._reportProgress( '' );
 					};
-					this.wwObjLoader2.registerCallbackProgress( reportProgress );
+					this.wwObjLoader2.registerCallbackProgress( this._reportProgress );
 					this.wwObjLoader2.registerCallbackCompletedLoading( completedLoading );
 					this.wwObjLoader2.registerCallbackMaterialsLoaded( materialsLoaded );
 					this.wwObjLoader2.registerCallbackMeshLoaded( meshLoaded );
@@ -200,6 +199,11 @@
 					return true;
 				};
 
+				WWOBJLoader2Example.prototype._reportProgress = function( text ) {
+					console.log( 'Progress: ' + text );
+					document.getElementById( 'feedback' ).innerHTML = Validator.isValid( text ) ? text : '';
+				};
+
 				WWOBJLoader2Example.prototype.loadFiles = function ( prepData ) {
 					prepData.setSceneGraphBaseNode( this.pivot );
 					prepData.setStreamMeshes( this.streamMeshes );

examples/webgl_loader_obj2_ww_parallels.html

@@ -207,17 +207,21 @@
 					}
 					var scope = this;
 					scope.wwDirector.objectsCompleted = 0;
-					scope.feedbackArray = new Array( maxWebWorkers );
+					scope.feedbackArray = [];
+					scope.reportDonwload = [];
 
 					var i;
 					for ( i = 0; i < maxWebWorkers; i++ ) {
 
 						scope.feedbackArray[ i ] = 'Worker #' + i + ': Awaiting feedback';
+						scope.reportDonwload[ i ] = true;
 
 					}
 					scope.reportProgress( scope.feedbackArray.join( '\<br\>' ) );
 
 					var callbackCompletedLoading = function ( modelName, instanceNo ) {
+						scope.reportDonwload[ instanceNo ] = false;
+
 						var msg = 'Worker #' + instanceNo + ': Completed loading: ' + modelName + ' (#' + scope.wwDirector.objectsCompleted + ')';
 						console.log( msg );
 						scope.feedbackArray[ instanceNo ] = msg;
@@ -226,6 +230,16 @@
 						if ( scope.wwDirector.objectsCompleted + 1 === maxQueueSize ) scope.running = false;
 					};
 
+					var callbackReportProgress = function ( content, instanceNo ) {
+						if ( scope.reportDonwload[ instanceNo ] ) {
+							var msg = 'Worker #' + instanceNo + ': ' + content;
+							console.log( msg );
+
+							scope.feedbackArray[ instanceNo ] = msg;
+							scope.reportProgress( scope.feedbackArray.join( '\<br\>' ) );
+						}
+					};
+
 					var callbackMeshLoaded = function ( name, bufferGeometry, material ) {
 						var materialOverride;
 
@@ -240,6 +254,7 @@
 					};
 
 					var globalCallbacks = new THREE.OBJLoader2.WWOBJLoader2.PrepDataCallbacks();
+					globalCallbacks.registerCallbackProgress( callbackReportProgress );
 					globalCallbacks.registerCallbackCompletedLoading( callbackCompletedLoading );
 					globalCallbacks.registerCallbackMeshLoaded( callbackMeshLoaded );
 					this.wwDirector.prepareWorkers( globalCallbacks, maxQueueSize, maxWebWorkers );