Moved binary files load progress reporting to Loader.js. Added load progress reporting to demos with larger meshes.

To be used like this:

    var loader = new THREE.Loader( true );
    container.appendChild( loader.statusDomElement );

    loader.loadBinary( url, function( geometry ) { createScene( geometry ) }, path );

    function createScene( geometry ) {
        ...

        loader.statusDomElement.style.display = "none";

    }

build/ThreeExtras.js

@@ -184,9 +184,10 @@ var Plane=function(a,b,d,f){THREE.Geometry.call(this);var g,i=a/2,k=b/2;d=d||1;f
 Plane.prototype=new THREE.Geometry;Plane.prototype.constructor=Plane;
 var Sphere=function(a,b,d){THREE.Geometry.call(this);var f,g=Math.max(3,b||8),i=Math.max(2,d||6);b=[];for(d=0;d<i+1;d++){f=d/i;var k=a*Math.cos(f*Math.PI),c=a*Math.sin(f*Math.PI),j=[],y=0;for(f=0;f<g;f++){var s=2*f/g,D=c*Math.sin(s*Math.PI);s=c*Math.cos(s*Math.PI);(d==0||d==i)&&f>0||(y=this.vertices.push(new THREE.Vertex(new THREE.Vector3(s,k,D)))-1);j.push(y)}b.push(j)}var q,w,v;a=b.length;for(d=0;d<a;d++){g=b[d].length;if(d>0)for(f=0;f<g;f++){j=f==g-1;i=b[d][j?0:f+1];k=b[d][j?g-1:f];c=b[d-1][j?
 g-1:f];j=b[d-1][j?0:f+1];D=d/(a-1);q=(d-1)/(a-1);w=(f+1)/g;s=f/g;y=new THREE.UV(1-w,D);D=new THREE.UV(1-s,D);s=new THREE.UV(1-s,q);var z=new THREE.UV(1-w,q);if(d<b.length-1){q=this.vertices[i].position.clone();w=this.vertices[k].position.clone();v=this.vertices[c].position.clone();q.normalize();w.normalize();v.normalize();this.faces.push(new THREE.Face3(i,k,c,[new THREE.Vector3(q.x,q.y,q.z),new THREE.Vector3(w.x,w.y,w.z),new THREE.Vector3(v.x,v.y,v.z)]));this.uvs.push([y,D,s])}if(d>1){q=this.vertices[i].position.clone();
-w=this.vertices[c].position.clone();v=this.vertices[j].position.clone();q.normalize();w.normalize();v.normalize();this.faces.push(new THREE.Face3(i,c,j,[new THREE.Vector3(q.x,q.y,q.z),new THREE.Vector3(w.x,w.y,w.z),new THREE.Vector3(v.x,v.y,v.z)]));this.uvs.push([y,s,z])}}}this.computeCentroids();this.computeNormals()};Sphere.prototype=new THREE.Geometry;Sphere.prototype.constructor=Sphere;THREE.Loader=function(){};
-THREE.Loader.prototype={loadAsciiOld:function(a,b){var d=document.createElement("script");d.type="text/javascript";d.onload=b;d.src=a;document.getElementsByTagName("head")[0].appendChild(d)},loadAscii:function(a,b,d){var f=(new Date).getTime();a=new Worker(a);a.onmessage=function(g){THREE.Loader.prototype.createModel(g.data,b,d)};a.postMessage(f)},loadBinary:function(a,b,d,f){var g=(new Date).getTime();a=new Worker(a);a.onmessage=function(i){THREE.Loader.prototype.loadAjaxBuffers(i.data.buffers,i.data.materials,
-b,d,f)};a.onerror=function(i){alert("worker.onerror: "+i.message+"\n"+i.data);i.preventDefault()};a.postMessage(g)},loadAjaxBuffers:function(a,b,d,f,g){var i=new XMLHttpRequest,k=f+"/"+a,c=0;i.onreadystatechange=function(){if(i.readyState==4)i.status==200||i.status==0?THREE.Loader.prototype.createBinModel(i.responseText,d,f,b):alert("Couldn't load ["+k+"] ["+i.status+"]");else if(i.readyState==3){if(g){if(c==0)c=i.getResponseHeader("Content-Length");g({total:c,loaded:i.responseText.length})}}else if(i.readyState==
+w=this.vertices[c].position.clone();v=this.vertices[j].position.clone();q.normalize();w.normalize();v.normalize();this.faces.push(new THREE.Face3(i,c,j,[new THREE.Vector3(q.x,q.y,q.z),new THREE.Vector3(w.x,w.y,w.z),new THREE.Vector3(v.x,v.y,v.z)]));this.uvs.push([y,s,z])}}}this.computeCentroids();this.computeNormals()};Sphere.prototype=new THREE.Geometry;Sphere.prototype.constructor=Sphere;THREE.Loader=function(a){this.statusDomElement=(this.showStatus=a)?this.addStatusElement():null};
+THREE.Loader.prototype={addStatusElement:function(){var a=document.createElement("div");a.style.fontSize="0.8em";a.style.textAlign="left";a.style.background="#b00";a.style.color="#fff";a.style.width="140px";a.style.padding="0.25em 0.25em 0.25em 0.5em";a.style.position="absolute";a.style.right="0px";a.style.top="0px";a.style.zIndex=1E3;a.innerHTML="Loading ...";return a},updateProgress:function(a){var b="Loaded ";b+=a.total?(100*a.loaded/a.total).toFixed(0)+"%":(a.loaded/1E3).toFixed(2)+" KB";this.statusDomElement.innerHTML=
+b},loadAsciiOld:function(a,b){var d=document.createElement("script");d.type="text/javascript";d.onload=b;d.src=a;document.getElementsByTagName("head")[0].appendChild(d)},loadAscii:function(a,b,d){var f=(new Date).getTime();a=new Worker(a);a.onmessage=function(g){THREE.Loader.prototype.createModel(g.data,b,d)};a.postMessage(f)},loadBinary:function(a,b,d){var f=(new Date).getTime();a=new Worker(a);var g=this.showProgress?THREE.Loader.prototype.updateProgress:null;a.onmessage=function(i){THREE.Loader.prototype.loadAjaxBuffers(i.data.buffers,
+i.data.materials,b,d,g)};a.onerror=function(i){alert("worker.onerror: "+i.message+"\n"+i.data);i.preventDefault()};a.postMessage(f)},loadAjaxBuffers:function(a,b,d,f,g){var i=new XMLHttpRequest,k=f+"/"+a,c=0;i.onreadystatechange=function(){if(i.readyState==4)i.status==200||i.status==0?THREE.Loader.prototype.createBinModel(i.responseText,d,f,b):alert("Couldn't load ["+k+"] ["+i.status+"]");else if(i.readyState==3){if(g){if(c==0)c=i.getResponseHeader("Content-Length");g({total:c,loaded:i.responseText.length})}}else if(i.readyState==
 2)c=i.getResponseHeader("Content-Length")};i.open("GET",k,true);i.overrideMimeType("text/plain; charset=x-user-defined");i.setRequestHeader("Content-Type","text/plain");i.send(null)},createBinModel:function(a,b,d,f){var g=function(i){function k(l,n){var t=s(l,n),H=s(l,n+1),Q=s(l,n+2),ba=s(l,n+3),fa=(ba<<1&255|Q>>7)-127;t=(Q&127)<<16|H<<8|t;if(t==0&&fa==-127)return 0;return(1-2*(ba>>7))*(1+t*Math.pow(2,-23))*Math.pow(2,fa)}function c(l,n){var t=s(l,n),H=s(l,n+1),Q=s(l,n+2);return(s(l,n+3)<<24)+(Q<<
 16)+(H<<8)+t}function j(l,n){var t=s(l,n);return(s(l,n+1)<<8)+t}function y(l,n){var t=s(l,n);return t>127?t-256:t}function s(l,n){return l.charCodeAt(n)&255}function D(l){var n,t,H;n=c(a,l);t=c(a,l+p);H=c(a,l+o);l=j(a,l+x);THREE.Loader.prototype.f3(u,n,t,H,l)}function q(l){var n,t,H,Q,ba,fa;n=c(a,l);t=c(a,l+p);H=c(a,l+o);Q=j(a,l+x);ba=c(a,l+C);fa=c(a,l+S);l=c(a,l+B);THREE.Loader.prototype.f3n(u,m,n,t,H,Q,ba,fa,l)}function w(l){var n,t,H,Q;n=c(a,l);t=c(a,l+V);H=c(a,l+G);Q=c(a,l+E);l=j(a,l+W);THREE.Loader.prototype.f4(u,
 n,t,H,Q,l)}function v(l){var n,t,H,Q,ba,fa,ka,ra;n=c(a,l);t=c(a,l+V);H=c(a,l+G);Q=c(a,l+E);ba=j(a,l+W);fa=c(a,l+O);ka=c(a,l+I);ra=c(a,l+A);l=c(a,l+L);THREE.Loader.prototype.f4n(u,m,n,t,H,Q,ba,fa,ka,ra,l)}function z(l){var n,t;n=c(a,l);t=c(a,l+T);l=c(a,l+$);THREE.Loader.prototype.uv3(u,r[n*2],r[n*2+1],r[t*2],r[t*2+1],r[l*2],r[l*2+1])}function K(l){var n,t,H;n=c(a,l);t=c(a,l+M);H=c(a,l+J);l=c(a,l+X);THREE.Loader.prototype.uv4(u,r[n*2],r[n*2+1],r[t*2],r[t*2+1],r[H*2],r[H*2+1],r[l*2],r[l*2+1])}var u=

examples/geometry_large_mesh.html

@@ -64,6 +64,8 @@
 			var scene;
 			var canvasRenderer, webglRenderer;
 
+			var loader;
+			
 			var mesh, zmesh, lightMesh;
 			
 			var directionalLight, pointLight;
@@ -177,12 +179,15 @@
 
 				var s = (new Date).getTime();
 				
-				var loader = new THREE.Loader();
+				loader = new THREE.Loader( true );
+				document.body.appendChild( loader.statusDomElement );
+				
 				//loader.loadAscii( 'obj/lucy/Lucy100k_slim.js', function( geometry ) { createScene( geometry, s ) } );
 				loader.loadBinary( 'obj/lucy/Lucy100k_bin.js', function( geometry ) { createScene( geometry, s ) }, "obj/lucy" );
 
 			}
 			
+			
 			function createScene( geometry, start ) {
 				
 				addMesh( geometry, 0.75, 900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x990000, shininess: 30 } ) );
@@ -190,6 +195,8 @@
 				addMesh( geometry, 0.75, -300, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x111111, specular: 0xffaa00, shininess: 10 } ) );
 				addMesh( geometry, 0.75, -900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x555555, specular: 0x666666, shininess: 10 } ) );
 				
+				loader.statusDomElement.style.display = "none";
+				
 				log( "geometry.vertices: " + geometry.vertices.length );
 				log( "geometry.faces: " + geometry.faces.length );
 

examples/materials_cars.html

@@ -27,8 +27,6 @@
 			#car_info { text-align:center; }
 			#car_name { font-size:1em }
 			#car_author { font-size:1em }
-
-			#status { font-size:0.8em; text-align:left; background:#b00; color:#fff; width:140px; padding:0.25em 0.25em 0.25em 0.5em; position:absolute; right:0px; top:0px; z-index:1000; }
 		</style>
 	</head>
 
@@ -54,8 +52,6 @@
 			<div id="buttons_materials" class="bwrap"></div>
 		</div>
 
-		<div id="status">Loading model ...</div>
-
 		<div id="log"></div>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
@@ -159,7 +155,8 @@
 			var windowHalfY = window.innerHeight / 2;
 
 			var loader = new THREE.Loader();
-
+			document.body.appendChild( loader.statusDomElement );
+			
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 			init();
@@ -457,31 +454,12 @@
 
 				}
 
-				loader.loadBinary( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) }, CARS[ "veyron" ].path, updateProgress );
+				loader.loadBinary( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) }, CARS[ "veyron" ].path );
 
 				for(var c in CARS) initCarButton( c );
 
 			}
 
-			function updateProgress( progress ) {
-
-				var message = "Loaded ";
-
-				if ( progress.total ) {
-
-					message += ( 100 * progress.loaded / progress.total ).toFixed(0) + "%";
-
-
-				} else {
-
-					message += ( progress.loaded / 1000 ).toFixed(2) + " KB";
-
-				}
-
-				$( "status" ).innerHTML = message;
-
-			}
-
 			function initCarButton( car ) {
 
 				$( car ).addEventListener( 'click', function() {
@@ -489,7 +467,7 @@
 					if ( ! CARS[ car ].object ) {
 
 						$( "status" ).style.display = "block";
-						loader.loadBinary( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) }, CARS[ car ].path, updateProgress );
+						loader.loadBinary( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) }, CARS[ car ].path );
 
 					} else {
 
@@ -586,8 +564,8 @@
 
 				switchCar( car );
 
-				$( "status" ).style.display = "none";
-				$( "status" ).innerHTML = "Loading model ...";
+				loader.statusDomElement.style.display = "none";
+				loader.statusDomElement.innerHTML = "Loading model ...";
 
 			}
 

examples/materials_cubemap.html

@@ -54,6 +54,8 @@
 
 			var mesh, zmesh, lightMesh, geometry;
 
+			var loader;
+			
 			var directionalLight, pointLight;
 
 			var mouseX = 0;
@@ -129,7 +131,9 @@
 				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
 
-				var loader = new THREE.Loader();
+				loader = new THREE.Loader( true );
+				document.body.appendChild( loader.statusDomElement );
+				
 				loader.loadBinary( "obj/walt/WaltHead_bin.js", function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) }, "obj/walt" );
 
 			}
@@ -141,6 +145,8 @@
 				SceneUtils.addMesh( scene, geometry, s,      0, 0, -100, 0,0,0, m1 );
 				SceneUtils.addMesh( scene, geometry, s,   -900, 0, -100, 0,0,0, m2 );
 				SceneUtils.addMesh( scene, geometry, s,    900, 0, -100, 0,0,0, m3 );
+				
+				loader.statusDomElement.style.display = "none";
 
 			}
 

examples/materials_cubemap_refraction.html

@@ -18,7 +18,7 @@
 
 			canvas { pointer-events:none; z-index:10; position:relative; }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
-			#d { text-align:center; margin:1em auto -9.5em; z-index:1000; position:relative; display:block; 
+			#d { text-align:center; margin:1em auto -9.5em; z-index:200; position:relative; display:block; 
 				background:rgba(0,0,0,0.5); padding:0.5em; width:400px; border-radius:15px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
 		</style>
 	</head>
@@ -55,6 +55,8 @@
 
 			var mesh, zmesh, lightMesh, geometry;
 
+			var loader;
+			
 			var directionalLight, pointLight;
 
 			var mouseX = 0;
@@ -126,7 +128,9 @@
 				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
 
-				var loader = new THREE.Loader();
+				loader = new THREE.Loader( true );
+				document.body.appendChild( loader.statusDomElement );
+				
 				loader.loadBinary( 'obj/lucy/Lucy100k_bin.js', function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) }, "obj/lucy" );
 
 			}
@@ -138,6 +142,8 @@
 				SceneUtils.addMesh( scene, geometry, s,      0, 0, z, 0,0,0, m1 );
 				SceneUtils.addMesh( scene, geometry, s,   -900, 0, z, 0,0,0, m2 );
 				SceneUtils.addMesh( scene, geometry, s,    900, 0, z, 0,0,0, m3 );
+				
+				loader.statusDomElement.style.display = "none";
 
 			}
 

src/extras/io/Loader.js

@@ -2,11 +2,56 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.Loader = function() {
+THREE.Loader = function( showStatus ) {
+	
+	this.showStatus = showStatus;
+	
+	this.statusDomElement = showStatus ? this.addStatusElement() : null;
+
 };
 
 THREE.Loader.prototype = {
 
+	addStatusElement: function ( ) {
+		
+		var e = document.createElement( "div" );
+		
+		e.style.fontSize = "0.8em"; 
+		e.style.textAlign = "left";
+		e.style.background = "#b00"; 
+		e.style.color = "#fff"; 
+		e.style.width = "140px"; 
+		e.style.padding = "0.25em 0.25em 0.25em 0.5em"; 
+		e.style.position = "absolute"; 
+		e.style.right = "0px"; 
+		e.style.top = "0px"; 
+		e.style.zIndex = 1000;
+		
+		e.innerHTML = "Loading ...";
+		
+		return e;
+		
+	},
+	
+	updateProgress: function ( progress ) {
+
+		var message = "Loaded ";
+
+		if ( progress.total ) {
+
+			message += ( 100 * progress.loaded / progress.total ).toFixed(0) + "%";
+
+
+		} else {
+
+			message += ( progress.loaded / 1000 ).toFixed(2) + " KB";
+
+		}
+
+		this.statusDomElement.innerHTML = message;
+
+	},
+	
 	// Load models generated by Blender exporter and original OBJ converter (converter_obj_three.py)
 
 	loadAsciiOld: function( url, callback ) {
@@ -41,16 +86,17 @@ THREE.Loader.prototype = {
 	//  - urlbase parameter is mandatory (it applies to all models, it tells where to find the file with binary buffers)
 	//  - binary models consist of two files: JS and BIN
 
-	loadBinary: function( url, callback, urlbase, callback_progress ) {
-
+	loadBinary: function( url, callback, urlbase ) {
+	
 		// #1 load JS part via web worker
 
 		//  This isn't really necessary, JS part is tiny,
 		//  could be done by more ordinary means.
 
 		var s = (new Date).getTime(),
-			worker = new Worker( url );
-
+			worker = new Worker( url ),
+			callback_progress = this.showProgress ? THREE.Loader.prototype.updateProgress : null;
+		
 		worker.onmessage = function( event ) {
 
 			var materials = event.data.materials,