OBJLoader now using EventDispatcher.

The only confusing part of this approach is the event object that gets dispatched. For ImageLoader you need to look for event.image, and for OBJLoader you need to look for event.object. Maybe it should be consistent for all and just be event.content?

examples/js/loaders/OBJLoader.js

@@ -2,302 +2,309 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.OBJLoader = function () {};
+THREE.OBJLoader = function () {
 
-THREE.OBJLoader.prototype = new THREE.Loader();
-THREE.OBJLoader.prototype.constructor = THREE.OBJLoader;
+	THREE.EventTarget.call( this );
 
-THREE.OBJLoader.prototype.load = function ( url, callback ) {
+};
 
-	var that = this;
-	var xhr = new XMLHttpRequest();
+THREE.OBJLoader.prototype = {
 
-	xhr.onreadystatechange = function () {
+	constructor: THREE.OBJLoader,
 
-		if ( xhr.readyState == 4 ) {
+	load: function ( url ) {
 
-			if ( xhr.status == 200 || xhr.status == 0 ) {
+		var scope = this;
+		var xhr = new XMLHttpRequest();
 
-				callback( that.parse( xhr.responseText ) );
+		xhr.onreadystatechange = function () {
 
-			} else {
+			if ( xhr.readyState == 4 ) {
 
-				console.error( 'THREE.OBJLoader: Couldn\'t load ' + url + ' (' + xhr.status + ')' );
+				if ( xhr.status == 200 || xhr.status == 0 ) {
 
-			}
+					scope.dispatchEvent( { type: 'complete', object: scope.parse( xhr.responseText ) } );
 
-		}
+				} else {
 
-	};
+					scope.dispatchEvent( { type: 'error', status: xhr.status } );
 
-	xhr.open( "GET", url, true );
-	xhr.send( null );
+				}
 
-};
+			}
 
-THREE.OBJLoader.prototype.parse = function ( data ) {
+		};
 
-	function vector( x, y, z ) {
+		xhr.open( 'GET', url, true );
+		xhr.send( null );
 
-		return new THREE.Vector3( x, y, z );
+	},
 
-	}
+	parse: function ( data ) {
 
-	function uv( u, v ) {
+		function vector( x, y, z ) {
 
-		return new THREE.UV( u, 1.0 - v );
+			return new THREE.Vector3( x, y, z );
 
-	}
+		}
 
-	function face3( a, b, c, normals ) {
+		function uv( u, v ) {
 
-		return new THREE.Face3( a, b, c, normals );
+			return new THREE.UV( u, 1.0 - v );
 
-	}
+		}
 
-	function face4( a, b, c, d, normals ) {
+		function face3( a, b, c, normals ) {
 
-		return new THREE.Face4( a, b, c, d, normals );
+			return new THREE.Face3( a, b, c, normals );
 
-	}
+		}
 
-	var group = new THREE.Object3D();
+		function face4( a, b, c, d, normals ) {
 
-	var vertices = [];
-	var normals = [];
-	var uvs = [];
+			return new THREE.Face4( a, b, c, d, normals );
 
-	var pattern, result;
+		}
 
-	// v float float float
+		var group = new THREE.Object3D();
 
-	pattern = /v( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/g;
+		var vertices = [];
+		var normals = [];
+		var uvs = [];
 
-	while ( ( result = pattern.exec( data ) ) != null ) {
+		var pattern, result;
 
-		// ["v 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
+		// v float float float
 
-		vertices.push( vector(
-			parseFloat( result[ 1 ] ),
-			parseFloat( result[ 2 ] ),
-			parseFloat( result[ 3 ] )
-		) );
+		pattern = /v( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/g;
 
-	}
+		while ( ( result = pattern.exec( data ) ) != null ) {
 
+			// ["v 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
 
-	// vn float float float
+			vertices.push( vector(
+				parseFloat( result[ 1 ] ),
+				parseFloat( result[ 2 ] ),
+				parseFloat( result[ 3 ] )
+			) );
 
-	pattern = /vn( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/g;
+		}
 
-	while ( ( result = pattern.exec( data ) ) != null ) {
 
-		// ["vn 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
+		// vn float float float
 
-		normals.push( vector(
-			parseFloat( result[ 1 ] ),
-			parseFloat( result[ 2 ] ),
-			parseFloat( result[ 3 ] )
-		) );
+		pattern = /vn( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/g;
 
-	}
+		while ( ( result = pattern.exec( data ) ) != null ) {
 
-	// vt float float
+			// ["vn 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
 
-	pattern = /vt( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/g;
+			normals.push( vector(
+				parseFloat( result[ 1 ] ),
+				parseFloat( result[ 2 ] ),
+				parseFloat( result[ 3 ] )
+			) );
 
-	while ( ( result = pattern.exec( data ) ) != null ) {
+		}
 
-		// ["vt 0.1 0.2", "0.1", "0.2"]
+		// vt float float
 
-		uvs.push( uv(
-			parseFloat( result[ 1 ] ),
-			parseFloat( result[ 2 ] )
-		) );
+		pattern = /vt( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/g;
 
-	}
+		while ( ( result = pattern.exec( data ) ) != null ) {
 
-	var data = data.split( '\no ');
+			// ["vt 0.1 0.2", "0.1", "0.2"]
 
-	for ( var i = 0, l = data.length; i < l; i ++ ) {
+			uvs.push( uv(
+				parseFloat( result[ 1 ] ),
+				parseFloat( result[ 2 ] )
+			) );
 
-		var object = data[ i ];
+		}
+
+		var data = data.split( '\no ');
+
+		for ( var i = 0, l = data.length; i < l; i ++ ) {
 
-		var geometry = new THREE.Geometry();
+			var object = data[ i ];
 
-		geometry.vertices = vertices;
+			var geometry = new THREE.Geometry();
 
-		// f vertex vertex vertex ...
+			geometry.vertices = vertices;
 
-		pattern = /f( [\d]+)( [\d]+)( [\d]+)( [\d]+)?/g;
+			// f vertex vertex vertex ...
 
-		while ( ( result = pattern.exec( object ) ) != null ) {
+			pattern = /f( [\d]+)( [\d]+)( [\d]+)( [\d]+)?/g;
 
-			// ["f 1 2 3", "1", "2", "3", undefined]
+			while ( ( result = pattern.exec( object ) ) != null ) {
 
-			if ( result[ 4 ] === undefined ) {
+				// ["f 1 2 3", "1", "2", "3", undefined]
+
+				if ( result[ 4 ] === undefined ) {
 			
-				geometry.faces.push( face3(
-					parseInt( result[ 1 ] ) - 1,
-					parseInt( result[ 2 ] ) - 1,
-					parseInt( result[ 3 ] ) - 1
-				) );
+					geometry.faces.push( face3(
+						parseInt( result[ 1 ] ) - 1,
+						parseInt( result[ 2 ] ) - 1,
+						parseInt( result[ 3 ] ) - 1
+					) );
 
-			} else {
+				} else {
 
-				geometry.faces.push( face4(
-					parseInt( result[ 1 ] ) - 1,
-					parseInt( result[ 2 ] ) - 1,
-					parseInt( result[ 3 ] ) - 1,
-					parseInt( result[ 4 ] ) - 1
-				) );
+					geometry.faces.push( face4(
+						parseInt( result[ 1 ] ) - 1,
+						parseInt( result[ 2 ] ) - 1,
+						parseInt( result[ 3 ] ) - 1,
+						parseInt( result[ 4 ] ) - 1
+					) );
 
-			}
+				}
 
-		}
+			}
 
-		// f vertex/uv vertex/uv vertex/uv ...
+			// f vertex/uv vertex/uv vertex/uv ...
 
-		pattern = /f( ([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))?/g;
+			pattern = /f( ([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))?/g;
 
-		while ( ( result = pattern.exec( object ) ) != null ) {
+			while ( ( result = pattern.exec( object ) ) != null ) {
 
-			// ["f 1/1 2/2 3/3", " 1/1", "1", "1", " 2/2", "2", "2", " 3/3", "3", "3", undefined, undefined, undefined]
+				// ["f 1/1 2/2 3/3", " 1/1", "1", "1", " 2/2", "2", "2", " 3/3", "3", "3", undefined, undefined, undefined]
 
-			if ( result[ 10 ] === undefined ) {
+				if ( result[ 10 ] === undefined ) {
 			
-				geometry.faces.push( face3(
-					parseInt( result[ 2 ] ) - 1,
-					parseInt( result[ 5 ] ) - 1,
-					parseInt( result[ 8 ] ) - 1
-				) );
-
-				geometry.faceVertexUvs[ 0 ].push( [
-					uvs[ parseInt( result[ 3 ] ) - 1 ],
-					uvs[ parseInt( result[ 6 ] ) - 1 ],
-					uvs[ parseInt( result[ 9 ] ) - 1 ]
-				] );
-
-			} else {
-
-				geometry.faces.push( face4(
-					parseInt( result[ 2 ] ) - 1,
-					parseInt( result[ 5 ] ) - 1,
-					parseInt( result[ 8 ] ) - 1,
-					parseInt( result[ 11 ] ) - 1
-				) );
-
-				geometry.faceVertexUvs[ 0 ].push( [
-					uvs[ parseInt( result[ 3 ] ) - 1 ],
-					uvs[ parseInt( result[ 6 ] ) - 1 ],
-					uvs[ parseInt( result[ 9 ] ) - 1 ],
-					uvs[ parseInt( result[ 12 ] ) - 1 ]
-				] );
+					geometry.faces.push( face3(
+						parseInt( result[ 2 ] ) - 1,
+						parseInt( result[ 5 ] ) - 1,
+						parseInt( result[ 8 ] ) - 1
+					) );
+
+					geometry.faceVertexUvs[ 0 ].push( [
+						uvs[ parseInt( result[ 3 ] ) - 1 ],
+						uvs[ parseInt( result[ 6 ] ) - 1 ],
+						uvs[ parseInt( result[ 9 ] ) - 1 ]
+					] );
+
+				} else {
+
+					geometry.faces.push( face4(
+						parseInt( result[ 2 ] ) - 1,
+						parseInt( result[ 5 ] ) - 1,
+						parseInt( result[ 8 ] ) - 1,
+						parseInt( result[ 11 ] ) - 1
+					) );
+
+					geometry.faceVertexUvs[ 0 ].push( [
+						uvs[ parseInt( result[ 3 ] ) - 1 ],
+						uvs[ parseInt( result[ 6 ] ) - 1 ],
+						uvs[ parseInt( result[ 9 ] ) - 1 ],
+						uvs[ parseInt( result[ 12 ] ) - 1 ]
+					] );
+
+				}
 
 			}
 
-		}
-
-		// f vertex/uv/normal vertex/uv/normal vertex/uv/normal ...
+			// f vertex/uv/normal vertex/uv/normal vertex/uv/normal ...
 
-		pattern = /f( ([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))?/g;
+			pattern = /f( ([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))?/g;
 
-		while ( ( result = pattern.exec( object ) ) != null ) {
+			while ( ( result = pattern.exec( object ) ) != null ) {
 
-			// ["f 1/1/1 2/2/2 3/3/3", " 1/1/1", "1", "1", "1", " 2/2/2", "2", "2", "2", " 3/3/3", "3", "3", "3", undefined, undefined, undefined, undefined]
+				// ["f 1/1/1 2/2/2 3/3/3", " 1/1/1", "1", "1", "1", " 2/2/2", "2", "2", "2", " 3/3/3", "3", "3", "3", undefined, undefined, undefined, undefined]
 
-			if ( result[ 13 ] === undefined ) {
+				if ( result[ 13 ] === undefined ) {
 			
-				geometry.faces.push( face3(
-					parseInt( result[ 2 ] ) - 1,
-					parseInt( result[ 6 ] ) - 1,
-					parseInt( result[ 10 ] ) - 1,
-					[
-						normals[ parseInt( result[ 4 ] ) - 1 ],
-						normals[ parseInt( result[ 8 ] ) - 1 ],
-						normals[ parseInt( result[ 12 ] ) - 1 ]
-					]
-				) );
-
-				geometry.faceVertexUvs[ 0 ].push( [
-					uvs[ parseInt( result[ 3 ] ) - 1 ],
-					uvs[ parseInt( result[ 7 ] ) - 1 ],
-					uvs[ parseInt( result[ 11 ] ) - 1 ]
-				] );
-
-			} else {
-
-				geometry.faces.push( face4(
-					parseInt( result[ 2 ] ) - 1,
-					parseInt( result[ 6 ] ) - 1,
-					parseInt( result[ 10 ] ) - 1,
-					parseInt( result[ 14 ] ) - 1,
-					[
-						normals[ parseInt( result[ 4 ] ) - 1 ],
-						normals[ parseInt( result[ 8 ] ) - 1 ],
-						normals[ parseInt( result[ 12 ] ) - 1 ],
-						normals[ parseInt( result[ 16 ] ) - 1 ]
-					]
-				) );
-
-				geometry.faceVertexUvs[ 0 ].push( [
-					uvs[ parseInt( result[ 3 ] ) - 1 ],
-					uvs[ parseInt( result[ 7 ] ) - 1 ],
-					uvs[ parseInt( result[ 11 ] ) - 1 ],
-					uvs[ parseInt( result[ 15 ] ) - 1 ]
-				] );
-
-			}
+					geometry.faces.push( face3(
+						parseInt( result[ 2 ] ) - 1,
+						parseInt( result[ 6 ] ) - 1,
+						parseInt( result[ 10 ] ) - 1,
+						[
+							normals[ parseInt( result[ 4 ] ) - 1 ],
+							normals[ parseInt( result[ 8 ] ) - 1 ],
+							normals[ parseInt( result[ 12 ] ) - 1 ]
+						]
+					) );
+
+					geometry.faceVertexUvs[ 0 ].push( [
+						uvs[ parseInt( result[ 3 ] ) - 1 ],
+						uvs[ parseInt( result[ 7 ] ) - 1 ],
+						uvs[ parseInt( result[ 11 ] ) - 1 ]
+					] );
+
+				} else {
+
+					geometry.faces.push( face4(
+						parseInt( result[ 2 ] ) - 1,
+						parseInt( result[ 6 ] ) - 1,
+						parseInt( result[ 10 ] ) - 1,
+						parseInt( result[ 14 ] ) - 1,
+						[
+							normals[ parseInt( result[ 4 ] ) - 1 ],
+							normals[ parseInt( result[ 8 ] ) - 1 ],
+							normals[ parseInt( result[ 12 ] ) - 1 ],
+							normals[ parseInt( result[ 16 ] ) - 1 ]
+						]
+					) );
+
+					geometry.faceVertexUvs[ 0 ].push( [
+						uvs[ parseInt( result[ 3 ] ) - 1 ],
+						uvs[ parseInt( result[ 7 ] ) - 1 ],
+						uvs[ parseInt( result[ 11 ] ) - 1 ],
+						uvs[ parseInt( result[ 15 ] ) - 1 ]
+					] );
+
+				}
 
 
-		}
+			}
 
-		// f vertex//normal vertex//normal vertex//normal ...
+			// f vertex//normal vertex//normal vertex//normal ...
 
-		pattern = /f( ([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))?/g;
+			pattern = /f( ([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))?/g;
 
-		while ( ( result = pattern.exec( object ) ) != null ) {
+			while ( ( result = pattern.exec( object ) ) != null ) {
 
-			// ["f 1//1 2//2 3//3", " 1//1", "1", "1", " 2//2", "2", "2", " 3//3", "3", "3", undefined, undefined, undefined]
+				// ["f 1//1 2//2 3//3", " 1//1", "1", "1", " 2//2", "2", "2", " 3//3", "3", "3", undefined, undefined, undefined]
 
-			if ( result[ 10 ] === undefined ) {
+				if ( result[ 10 ] === undefined ) {
 			
-				geometry.faces.push( face3(
-					parseInt( result[ 2 ] ) - 1,
-					parseInt( result[ 5 ] ) - 1,
-					parseInt( result[ 8 ] ) - 1,
-					[
-						normals[ parseInt( result[ 3 ] ) - 1 ],
-						normals[ parseInt( result[ 6 ] ) - 1 ],
-						normals[ parseInt( result[ 9 ] ) - 1 ]
-					]
-				) );
-
-			} else {
-
-				geometry.faces.push( face4(
-					parseInt( result[ 2 ] ) - 1,
-					parseInt( result[ 5 ] ) - 1,
-					parseInt( result[ 8 ] ) - 1,
-					parseInt( result[ 11 ] ) - 1,
-					[
-						normals[ parseInt( result[ 3 ] ) - 1 ],
-						normals[ parseInt( result[ 6 ] ) - 1 ],
-						normals[ parseInt( result[ 9 ] ) - 1 ],
-						normals[ parseInt( result[ 12 ] ) - 1 ]
-					]
-				) );
+					geometry.faces.push( face3(
+						parseInt( result[ 2 ] ) - 1,
+						parseInt( result[ 5 ] ) - 1,
+						parseInt( result[ 8 ] ) - 1,
+						[
+							normals[ parseInt( result[ 3 ] ) - 1 ],
+							normals[ parseInt( result[ 6 ] ) - 1 ],
+							normals[ parseInt( result[ 9 ] ) - 1 ]
+						]
+					) );
+
+				} else {
+
+					geometry.faces.push( face4(
+						parseInt( result[ 2 ] ) - 1,
+						parseInt( result[ 5 ] ) - 1,
+						parseInt( result[ 8 ] ) - 1,
+						parseInt( result[ 11 ] ) - 1,
+						[
+							normals[ parseInt( result[ 3 ] ) - 1 ],
+							normals[ parseInt( result[ 6 ] ) - 1 ],
+							normals[ parseInt( result[ 9 ] ) - 1 ],
+							normals[ parseInt( result[ 12 ] ) - 1 ]
+						]
+					) );
+
+				}
 
 			}
 
-		}
+			geometry.computeCentroids();
+
+			group.add( new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() ) );
 
-		geometry.computeCentroids();
+		}
 
-		group.add( new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() ) );
+		return group;
 
 	}
 
-	return group;
-
 }

examples/webgl_loader_obj.html

@@ -57,6 +57,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
+				// scene
+
 				scene = new THREE.Scene();
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
@@ -70,10 +72,25 @@
 				directionalLight.position.set( 0, 0, 1 ).normalize();
 				scene.add( directionalLight );
 
-				var texture = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
+				// texture
+
+				var texture = new THREE.Texture();
+
+				var loader = new THREE.ImageLoader();
+				loader.addEventListener( 'complete', function ( event ) {
+
+					texture.image = event.image;
+					texture.needsUpdate = true;
+
+				} );
+				loader.load( 'textures/ash_uvgrid01.jpg' );
+
+				// model
 
 				var loader = new THREE.OBJLoader();
-				loader.load( "obj/male02/male02.obj", function ( object ) {
+				loader.addEventListener( 'complete', function ( event ) {
+
+					var object = event.object;
 
 					for ( var i = 0, l = object.children.length; i < l; i ++ ) {
 
@@ -84,9 +101,10 @@
 					object.position.y = - 80;
 					scene.add( object );
 
-				} );
+				});
+				loader.load( 'obj/male02/male02.obj' );
 
-				// RENDERER
+				// 
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );

src/loaders/ImageLoader.js

@@ -27,7 +27,7 @@ THREE.ImageLoader.prototype = {
 
 		image.addEventListener( 'error', function () {
 		
-			scope.dispatchEvent( { type: 'error', image: image } );
+			scope.dispatchEvent( { type: 'error' } );
 		
 		}, false );