Second go at LoadingManager. See #3442.

examples/canvas_geometry_earth.html

@@ -64,17 +64,10 @@
 
 				// earth
 
-				var earthTexture = new THREE.Texture();
-				var loader = new THREE.ImageLoader();
-				loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( image ) {
-
-					earthTexture.image = image;
-					earthTexture.needsUpdate = true;
-
-				} );
+				var texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
 
 				var geometry = new THREE.SphereGeometry( 200, 20, 20 );
-				var material = new THREE.MeshBasicMaterial( { map: earthTexture, overdraw: true } );
+				var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
 
 				var mesh = new THREE.Mesh( geometry, material );
 				group.add( mesh );
@@ -86,7 +79,14 @@
 				canvas.height = 128;
 
 				var context = canvas.getContext( '2d' );
-				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
+				var gradient = context.createRadialGradient(
+					canvas.width / 2,
+					canvas.height / 2,
+					0,
+					canvas.width / 2,
+					canvas.height / 2,
+					canvas.width / 2
+				);
 				gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
 				gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
 

src/loaders/GeometryLoader.js

@@ -2,9 +2,9 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.GeometryLoader = function ( manager ) {
+THREE.GeometryLoader = function ( crossOrigin ) {
 
-	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+	this.crossOrigin = crossOrigin;
 
 };
 
@@ -12,19 +12,46 @@ THREE.GeometryLoader.prototype = {
 
 	constructor: THREE.GeometryLoader,
 
-	load: function ( url, callback ) {
+	load: function ( url, onLoad, onProgress, onError ) {
 
 		var scope = this;
 
-		this.manager.add( url, 'text', function ( event ) {
+		var request = new XMLHttpRequest();
 
-			if ( callback !== undefined ) {
+		if ( onLoad !== undefined ) {
 
-				callback( scope.parse( JSON.parse( event.target.responseText ) ) );
+			request.addEventListener( 'load', function ( event ) {
 
-			}
+				onLoad( scope.parse( JSON.parse( event.target.responseText ) ) );
 
-		} );
+			}, false );
+
+		}
+
+		if ( onProgress !== undefined ) {
+
+			request.addEventListener( 'progress', function ( event ) {
+
+				onProgress( event );
+
+			}, false );
+
+		}
+
+		if ( onError !== undefined ) {
+
+			request.addEventListener( 'error', function ( event ) {
+
+				onError( event );
+
+			}, false );
+
+		}
+
+		if ( this.crossOrigin !== undefined ) request.crossOrigin = this.crossOrigin;
+
+		request.open( 'GET', url, true );
+		request.send( null );
 
 	},
 

src/loaders/ImageLoader.js

@@ -2,9 +2,9 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.ImageLoader = function ( manager ) {
+THREE.ImageLoader = function ( crossOrigin ) {
 
-	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+	this.crossOrigin = crossOrigin;
 
 };
 
@@ -12,19 +12,45 @@ THREE.ImageLoader.prototype = {
 
 	constructor: THREE.ImageLoader,
 
-	load: function ( url, callback ) {
+	load: function ( url, onLoad, onProgress, onError ) {
 
-		var scope = this;
+		var image = document.createElement( 'img' );
 
-		this.manager.add( url, 'image', function ( image ) {
+		if ( onLoad !== undefined ) {
 
-			if ( callback !== undefined ) {
+			image.addEventListener( 'load', function ( event ) {
 
-				callback( image );
+				onLoad( this );
 
-			}
+			}, false );
 
-		} );
+		}
+
+		if ( onProgress !== undefined ) {
+
+			image.addEventListener( 'progress', function ( event ) {
+
+				onProgress( event );
+
+			}, false );
+
+		}
+
+		if ( onError !== undefined ) {
+
+			image.addEventListener( 'error', function ( event ) {
+
+				onError( event );
+
+			}, false );
+
+		}
+
+		if ( this.crossOrigin !== undefined ) image.crossOrigin = this.crossOrigin;
+
+		image.src = url;
+
+		return image;
 
 	}
 

src/loaders/LoadingManager.js

@@ -2,70 +2,39 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.LoadingManager = function () {
+THREE.LoadingManager = function ( onLoad, onProgress, onError ) {
 
 	var scope = this;
 
-	var list = [], cache = {};
+	var loaders = {};
+	var queue = [];
+	var cache = {};
 
 	var loaded = 0, total = 0;
 
-	var crossOrigin = null;
+	var loadNext = function () {
 
-	var load = function () {
-
-		var item = list[ 0 ];
+		var item = queue[ 0 ];
 
 		if ( cache[ item.url ] === undefined ) {
 
-			switch ( item.type ) {
-
-				case 'image':
-
-					var image = document.createElement( 'img' );
-
-					image.addEventListener( 'load', function ( event ) {
-
-						if ( item.onLoad !== undefined ) {
-
-							item.onLoad( this );
-
-						}
-
-						cache[ item.url ] = this;
-
-						onLoad( item );
-
-					}, false );
-
-					if ( crossOrigin !== null ) image.crossOrigin = crossOrigin;
+			var loader = loaders[ item.type ];
 
-					image.src = item.url;
+			if ( loader !== undefined ) {
 
-					break;
+				loader.load( item.url, function ( event ) {
 
-				default:
+					if ( item.onLoad !== undefined ) {
 
-					var request = new XMLHttpRequest();
+						item.onLoad( event );
 
-					request.addEventListener( 'load', function ( event ) {
+					}
 
-						if ( item.onLoad !== undefined ) {
+					cache[ item.url ] = event;
 
-							item.onLoad( event );
+					onItemLoaded( item );
 
-						}
-
-						cache[ item.url ] = event;
-
-						onLoad( item );
-
-					}, false );
-
-					request.open( 'GET', item.url, true );
-					request.send( null );
-
-					break;
+				} );
 
 			}
 
@@ -81,25 +50,25 @@ THREE.LoadingManager = function () {
 
 		}
 
-		list.shift();
+		queue.shift();
 
 	};
 
-	var onLoad = function ( item ) {
+	var onItemLoaded = function ( item ) {
 
 		loaded ++;
 
-		scope.dispatchEvent( { type: 'load', item: item, loaded: loaded, total: total } );
+		onProgress( item, loaded, total );
 
-		if ( list.length > 0 ) {
+		if ( queue.length > 0 ) {
 
-			load();
+			loadNext();
 
 		}
 
 		if ( loaded === total ) {
 
-			scope.dispatchEvent( { type: 'complete' } );
+			onLoad();
 
 		}
 
@@ -109,7 +78,7 @@ THREE.LoadingManager = function () {
 
 		total ++;
 
-		list.push( {
+		queue.push( {
 			url: url,
 			type: type,
 			onLoad: onLoad,
@@ -117,27 +86,14 @@ THREE.LoadingManager = function () {
 			onError: onError
 		} );
 
-		load();
+		loadNext();
 
 	};
 
-	this.setCrossOrigin = function ( value ) {
+	this.addLoader = function ( type, loader ) {
 
-		crossOrigin = value;
+		loaders[ type ] = loader;
 
 	};
 
 };
-
-THREE.LoadingManager.prototype = {
-
-	constructor: THREE.LoadingManager,
-
-	addEventListener: THREE.EventDispatcher.prototype.addEventListener,
-	hasEventListener: THREE.EventDispatcher.prototype.hasEventListener,
-	removeEventListener: THREE.EventDispatcher.prototype.removeEventListener,
-	dispatchEvent: THREE.EventDispatcher.prototype.dispatchEvent
-
-};
-
-THREE.DefaultLoadingManager = new THREE.LoadingManager();

src/loaders/TextureLoader.js

@@ -2,9 +2,9 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.TextureLoader = function () {
+THREE.TextureLoader = function ( crossOrigin ) {
 
-	this.crossOrigin = null;
+	this.crossOrigin = crossOrigin;
 
 };
 
@@ -12,35 +12,26 @@ THREE.TextureLoader.prototype = {
 
 	constructor: THREE.TextureLoader,
 
-	addEventListener: THREE.EventDispatcher.prototype.addEventListener,
-	hasEventListener: THREE.EventDispatcher.prototype.hasEventListener,
-	removeEventListener: THREE.EventDispatcher.prototype.removeEventListener,
-	dispatchEvent: THREE.EventDispatcher.prototype.dispatchEvent,
+	load: function ( url, onLoad ) {
 
-	load: function ( url ) {
+		var texture = new THREE.Texture();
 
-		var scope = this;
+		var loader = new THREE.ImageLoader();
+		loader.crossOrigin = this.crossOrigin;
+		loader.load( url, function ( image ) {
 
-		var image = new Image();
-
-		image.addEventListener( 'load', function () {
-
-			var texture = new THREE.Texture( image );
+			texture.image = image;
 			texture.needsUpdate = true;
 
-			scope.dispatchEvent( { type: 'load', content: texture } );
-
-		}, false );
-
-		image.addEventListener( 'error', function () {
+			if ( onLoad !== undefined ) {
 
-			scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
+				onLoad( texture );
 
-		}, false );
+			}
 
-		if ( scope.crossOrigin ) image.crossOrigin = scope.crossOrigin;
+		} );
 
-		image.src = url;
+		return texture;
 
 	}