Quellcode durchsuchen

GeometryLoader using LoadingMonitor.
That took a while... but I think it makes sense...

Mr.doob vor 13 Jahren
Ursprung
Commit
25978d4350

+ 1 - 0
examples/webgl_loader_json_blender.html

@@ -34,6 +34,7 @@
 
 		<script src="../build/Three.js"></script>
 
+		<script src="../src/loaders/LoadingMonitor.js"></script>
 		<script src="../src/loaders/GeometryLoader.js"></script>
 
 		<script src="js/loaders/ColladaLoader.js"></script>

+ 25 - 14
src/loaders/GeometryLoader.js

@@ -7,19 +7,20 @@ THREE.GeometryLoader = function () {
 
 	THREE.EventTarget.call( this );
 
+	this.crossOrigin = null;
+	this.path = null;
+
+
 };
 
 THREE.GeometryLoader.prototype = {
 
 	constructor: THREE.GeometryLoader,
 
-	crossOrigin: null,
-
-	path: null,
-
 	load: function ( url ) {
 
 		var scope = this;
+		var geometry = null;
 
 		if ( scope.path === null ) {
 
@@ -28,28 +29,24 @@ THREE.GeometryLoader.prototype = {
 
 		}
 
+		//
+
 		var xhr = new XMLHttpRequest();
 
 		xhr.addEventListener( 'load', function ( event ) {
 
 			if ( event.target.responseText ) {
 
-				scope.dispatchEvent( { type: 'load', content: scope.parse( JSON.parse( event.target.responseText ) ) } );
-
+				geometry = scope.parse( JSON.parse( event.target.responseText ), monitor );
+				
 			} else {
 
-				scope.dispatchEvent( { type: 'error', message: 'URL unreachable or empty file [' + url + ']' } );
+				scope.dispatchEvent( { type: 'error', message: 'Invalid file [' + url + ']' } );
 
 			}
 
 		}, false );
 
-		xhr.addEventListener( 'progress', function ( event ) {
-
-			scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } );
-
-		}, false );
-
 		xhr.addEventListener( 'error', function () {
 
 			scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
@@ -59,9 +56,21 @@ THREE.GeometryLoader.prototype = {
 		xhr.open( 'GET', url, true );
 		xhr.send( null );
 
+		//
+
+		var monitor = new THREE.LoadingMonitor();
+
+		monitor.addEventListener( 'load', function ( event ) {
+
+			scope.dispatchEvent( { type: 'load', content: geometry } );
+
+		} );
+
+		monitor.add( xhr );
+
 	},
 
-	parse: function ( data ) {
+	parse: function ( data, monitor ) {
 
 		var scope = this;
 		var geometry = new THREE.Geometry();
@@ -155,6 +164,8 @@ THREE.GeometryLoader.prototype = {
 				loader.crossOrigin = scope.crossOrigin;
 				loader.load( scope.path + '/' + sourceFile );
 
+				if ( monitor ) monitor.add( loader );
+
 			}
 
 			function rgb2hex( rgb ) {

+ 4 - 2
src/loaders/ImageLoader.js

@@ -6,17 +6,18 @@ THREE.ImageLoader = function () {
 
 	THREE.EventTarget.call( this );
 
+	this.crossOrigin = null;
+
 };
 
 THREE.ImageLoader.prototype = {
 
 	constructor: THREE.ImageLoader,
 
-	crossOrigin: null,
-
 	load: function ( url ) {
 
 		var scope = this;
+
 		var image = new Image();
 		
 		image.addEventListener( 'load', function () {
@@ -32,6 +33,7 @@ THREE.ImageLoader.prototype = {
 		}, false );
 
 		if ( scope.crossOrigin ) image.crossOrigin = scope.crossOrigin;
+
 		image.src = url;
 
 	}

+ 36 - 0
src/loaders/LoadingMonitor.js

@@ -0,0 +1,36 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.LoadingMonitor = function () {
+
+	THREE.EventTarget.call( this );
+
+	var scope = this;
+
+	var loaded = 0;
+	var total = 0;
+
+	var onLoad = function ( event ) {
+
+		loaded ++;
+
+		scope.dispatchEvent( { type: 'progress', loaded: loaded, total: total } );
+
+		if ( loaded === total ) {
+
+			scope.dispatchEvent( { type: 'load' } );
+
+		}
+
+	};
+
+	this.add = function ( loader ) {
+
+		total ++;
+
+		loader.addEventListener( 'load', onLoad, false );
+
+	};
+
+};