Added Loader class providing both asynchronous JS and web worker based loading of models.

The idea is that later there will be more loaders which would load different formats (like OBJLoader, ColladaLoader).

Usage (async JS):

var loader = new THREE.Loader();
loader.loadAsync( "obj/torus/Torus.js", function() { createScene( new Torus() ) } );

Usage (web worker):

var loader = new THREE.Loader();
loader.loadWorker( "obj/torus/Torus_slim.js", function( geometry ) { createScene( geometry ) } );

Web worker loader is useful for large meshes, where it allows browser to stay responsive for longer time and also it can handle larger meshes than async JS loader.

Web worker loader needs a simpler format of the model. Web workers can communicate with the main application only via message passing, where messages are JSON objects.

There is a new version of OBJ -> Three.js converter (convert_obj_threejs_slim.py) which can produce model in format needed for web workers.

All examples which were using models from OBJ converter were refactored to use Loader.

Except large mesh example, all examples are using just async JS loading. Web worker loading is there, it's just commented out, as it's a bit pain for local development.

Chrome doesn't allow to run web workers from pages accessed via file://, so you need either to run it with "--allow-file-access-from-files" flag, or access examples via local server (http://localhost/example.html).

examples/large_mesh_test.html

@@ -63,6 +63,7 @@
 		<script type="text/javascript" src="../src/core/UV.js"></script>
 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/io/Loader.js"></script>
 		<script type="text/javascript" src="../src/lights/Light.js"></script>
 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
@@ -88,6 +89,7 @@
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
+		
 		-->
 		
 		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
@@ -107,7 +109,7 @@
 			var scene;
 			var canvasRenderer, webglRenderer;
 
-			var mesh, zmesh, lightMesh, geometry;
+			var mesh, zmesh, lightMesh;
 			
 			var directionalLight, pointLight;
 			
@@ -217,36 +219,28 @@
 				bcanvas.addEventListener("click", toggleCanvas, false);
 				bwebgl.addEventListener("click", toggleWebGL, false);
 
-				function createModel() {
-					
-					geometry = new Lucy100k( );
-					
-					addMesh( geometry, 0.75, 900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x990000, 30, 1.0 ) );
-					addMesh( geometry, 0.75, 300, 0, 0, 0,0,0, new THREE.MeshFaceMaterial( ) );
-					addMesh( geometry, 0.75, -300, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x111111, 0xffaa00, 10, 1.0 )  );
-					addMesh( geometry, 0.75, -900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x555555, 0x666666, 10, 1.0 )  );
-					
-					/*
-					log( "geometry.vertices: " + geometry.vertices.length );
-					log( "geometry.faces: " + geometry.faces.length );
-					*/
-
-				}
-
-				loadAsync( "obj/lucy/Lucy100k.js", createModel );
 
+				var s = (new Date).getTime();
+				
+				var loader = new THREE.Loader();
+				//loader.loadAsync( "obj/lucy/Lucy100k.js", function() { createScene( new Lucy100k(), s ) } );
+				loader.loadWorker( 'obj/lucy/Lucy100k_slim.js', function( geometry ) { createScene( geometry, s ) } );
+				
 			}
-
-			function loadAsync( url, callback ) {
+			
+			function createScene( geometry, start ) {
 				
-				var el = document.createElement( 'script' );
-				el.type = 'text/javascript';
-				el.onload = callback;
-				el.src = url;
-				document.getElementsByTagName("head")[0].appendChild(el);
+				addMesh( geometry, 0.75, 900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x990000, 30, 1.0 ) );
+				addMesh( geometry, 0.75, 300, 0, 0, 0,0,0, new THREE.MeshFaceMaterial( ) );
+				addMesh( geometry, 0.75, -300, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x111111, 0xffaa00, 10, 1.0 )  );
+				addMesh( geometry, 0.75, -900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x555555, 0x666666, 10, 1.0 )  );
+				
+				log( "geometry.vertices: " + geometry.vertices.length );
+				log( "geometry.faces: " + geometry.faces.length );
 
+				log( "model loaded and created in " + ((new Date).getTime() - start) + " ms" );
+				
 			}
-
 			
 			function onDocumentMouseMove(event) {
 

examples/lights_pointlights_gl.html

@@ -38,10 +38,10 @@
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 		</div>
 
-        <!--
+		<!--
 		<script type="text/javascript" src="../build/Three.js"></script> 
-        -->
-        
+		-->
+		
 		<script type="text/javascript" src="../src/Three.js"></script>
 		<script type="text/javascript" src="../src/core/Color.js"></script>
 		<script type="text/javascript" src="../src/core/Vector2.js"></script>
@@ -56,6 +56,7 @@
 		<script type="text/javascript" src="../src/core/UV.js"></script>
 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/io/Loader.js"></script>
 		<script type="text/javascript" src="../src/lights/Light.js"></script>
 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
@@ -81,12 +82,11 @@
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
-        <!--
+		<!--
 
-        -->
-		<script type="text/javascript" src="obj/walt/WaltHead.js"></script> 
+		-->
 		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script> 
-        
+		
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -108,24 +108,40 @@
 
 				scene = new THREE.Scene();
 
-				//object = new THREE.Mesh( new WaltHead(), [ new THREE.MeshColorStrokeMaterial( 0xffffff ) ] );
-                //object = new THREE.Mesh( new WaltHead(), new THREE.MeshColorFillMaterial( 0xffffff ) );
-                object = new THREE.Mesh( new WaltHead(), new THREE.MeshPhongMaterial( 0x555555, 0x555555, 0xffffff, 50, 1.0  )  );
-                object.scale.x = object.scale.y = object.scale.z = 0.80;
-				object.overdraw = true;
-				scene.addObject( object );
-                
-                /*
-                var directionalLight = new THREE.DirectionalLight( 0x111111, 0.9 );
-                directionalLight.position.x = 1;
-                directionalLight.position.y = 1;
-                directionalLight.position.z = 2;
+				var loader = new THREE.Loader();
+				loader.loadAsync( "obj/walt/WaltHead.js", function() {
+				
+					//object = new THREE.Mesh( new WaltHead(), [ new THREE.MeshColorStrokeMaterial( 0xffffff ) ] );
+					//object = new THREE.Mesh( new WaltHead(), new THREE.MeshColorFillMaterial( 0xffffff ) );
+					object = new THREE.Mesh( new WaltHead(), new THREE.MeshPhongMaterial( 0x555555, 0x555555, 0xffffff, 50, 1.0  )  );
+					object.scale.x = object.scale.y = object.scale.z = 0.80;
+					object.overdraw = true;
+					scene.addObject( object );
+					
+				});
+				
+				/*
+				loader.loadWorker( "obj/walt/WaltHead_slim.js", function( geometry ) {
+				
+					object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( 0x555555, 0x555555, 0xffffff, 50, 1.0  )  );
+					object.scale.x = object.scale.y = object.scale.z = 0.80;
+					object.overdraw = true;
+					scene.addObject( object );
+					
+				});
+				*/
+				
+				/*
+				var directionalLight = new THREE.DirectionalLight( 0x111111, 0.9 );
+				directionalLight.position.x = 1;
+				directionalLight.position.y = 1;
+				directionalLight.position.z = 2;
 				directionalLight.position.normalize();
 				scene.addLight( directionalLight );
-                */
-                
+				*/
+				
 				scene.addLight( new THREE.AmbientLight( 0x00020 ) );
-                scene.addLight( new THREE.AmbientLight( 0x00000 ) );
+				scene.addLight( new THREE.AmbientLight( 0x00000 ) );
 
 				light1 = new THREE.PointLight( 0xff0040 );
 				scene.addLight( light1 );
@@ -136,30 +152,30 @@
 				light3 = new THREE.PointLight( 0x80ff80 );
 				scene.addLight( light3 );
 
-                var l1 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0xff0040 ) );
-                l1.position = light1.position;
-                scene.addObject( l1 );
-                
-                var l2 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0x0040ff ) );
-                l2.position = light2.position;
-                scene.addObject( l2 );
-     
-                var l3 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0x80ff80 ) );
-                l3.position = light3.position;
-                scene.addObject( l3 );
+				var l1 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0xff0040 ) );
+				l1.position = light1.position;
+				scene.addObject( l1 );
+				
+				var l2 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0x0040ff ) );
+				l2.position = light2.position;
+				scene.addObject( l2 );
+	 
+				var l3 = new THREE.Mesh( new Sphere( 1, 16, 8, 1 ), new THREE.MeshColorFillMaterial( 0x80ff80 ) );
+				l3.position = light3.position;
+				scene.addObject( l3 );
  
 				//renderer = new THREE.CanvasRenderer();
 				renderer = new THREE.WebGLRenderer( );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
-                
-                /*
+				
+				/*
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-                stats.domElement.style.zIndex = 100;
+				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
-                */
+				*/
 
 			}
 
@@ -182,8 +198,8 @@
 				light3.position.z = Math.sin( time * 0.5 ) * 30;
 
 				renderer.render(scene, camera);
-                
-                //stats.update();
+				
+				//stats.update();
 
 			}
 

examples/lights_test.html

@@ -33,7 +33,7 @@
 			<p>Using a modified version of <a href="http://github.com/alteredq/three.js">Three.js</a> by mrdoob.
 			
 			<br/>
-			<p>Best viewed in Chrome 7/8 or Firefox 4 using WebGL renderer.
+			<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
 			<p>Canvas renderer is very slow on anything other than Chrome.
 		</div>
 		
@@ -58,6 +58,7 @@
 		<script type="text/javascript" src="../src/core/UV.js"></script>
 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/io/Loader.js"></script>
 		<script type="text/javascript" src="../src/lights/Light.js"></script>
 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
@@ -211,34 +212,24 @@
 				bcanvas.addEventListener("click", toggleCanvas, false);
 				bwebgl.addEventListener("click", toggleWebGL, false);
 
-				function createModel() {
-					
-					// MESH
-					
-					geometry = new Torus( );
-					zmesh = new THREE.Mesh( geometry, new THREE.MeshColorFillMaterial( 0xffffff ) );
-					zmesh.position.x = 0;
-					zmesh.position.z = 0;
-					zmesh.position.y = 0;
-					zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 100;
-					zmesh.overdraw = true;
-					zmesh.updateMatrix();
-					scene.addObject(zmesh);
-					
-				}
 
-				loadAsync( "obj/torus/Torus.js", createModel);
+				var loader = new THREE.Loader();
+				loader.loadAsync( "obj/torus/Torus.js", function() { createScene( new Torus() ) } );
+				//loader.loadWorker( "obj/torus/Torus_slim.js", function( geometry ) { createScene( geometry ) } );
 
 			}
 
-			function loadAsync( url, callback ) {
+			function createScene( geometry ) {
+				
+				zmesh = new THREE.Mesh( geometry, new THREE.MeshColorFillMaterial( 0xffffff ) );
+				zmesh.position.x = 0;
+				zmesh.position.z = 0;
+				zmesh.position.y = 0;
+				zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 100;
+				zmesh.overdraw = true;
+				zmesh.updateMatrix();
+				scene.addObject(zmesh);
 				
-				var el = document.createElement( 'script' );
-				el.type = 'text/javascript';
-				el.onload = callback;
-				el.src = url;
-				document.getElementsByTagName("head")[0].appendChild(el);
-
 			}
 
 			

examples/shader_test.html

@@ -6,44 +6,44 @@
 		<style type="text/css">
 			body {
 				background:#000;
-                color:#fff;
-                padding:0;
+				color:#fff;
+				padding:0;
 				margin:0;
 				overflow:hidden;
-                font-family:georgia;
-                text-align:center;
+				font-family:georgia;
+				text-align:center;
 			}
-            h1 { }
-            a { color:skyblue }
-            canvas { pointer-events:none; z-index:10; position:relative; }
-            #log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
-            #d { text-align:center; margin:1em 0 -19.7em 0; z-index:0; position:relative; display:block }
-            .button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
-            .inactive { background:#999; color:#eee }
+			h1 { }
+			a { color:skyblue }
+			canvas { pointer-events:none; z-index:10; position:relative; }
+			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
+			#d { text-align:center; margin:1em 0 -19.7em 0; z-index:0; position:relative; display:block }
+			.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
+			.inactive { background:#999; color:#eee }
 		</style>
 	</head>
 	
-    <body>
-        <div id="d">
-            <h1>Shader test</h1>
-
-            <span id="rcanvas" class="button inactive">2d canvas renderer</span>
-            <span id="rwebgl" class="button">WebGL renderer</span>
-            <br/>
-            
-            <p>Using a modified version of <a href="http://github.com/alteredq/three.js">Three.js</a> by mrdoob.
-            
-            <br/>
-            <p>Best viewed in Chrome 7/8 or Firefox 4 using WebGL renderer.
-            <p>Canvas renderer is very slow on anything other than Chrome.
-            <p>Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
-        </div>
-        
-        <pre id="log"></pre>
-
-        <script type="text/javascript" src="../build/Three.js"></script> 
+	<body>
+		<div id="d">
+			<h1>Shader test</h1>
+
+			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
+			<span id="rwebgl" class="button">WebGL renderer</span>
+			<br/>
+			
+			<p>Using a modified version of <a href="http://github.com/alteredq/three.js">Three.js</a> by mrdoob.
+			
+			<br/>
+			<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
+			<p>Canvas renderer is very slow on anything other than Chrome.
+			<p>Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
+		</div>
+		
+		<pre id="log"></pre>
+
+		<script type="text/javascript" src="../build/Three.js"></script> 
 		<!--
-        -->
+		-->
 
 		<!--
 		<script type="text/javascript" src="../src/Three.js"></script>
@@ -60,6 +60,7 @@
 		<script type="text/javascript" src="../src/core/UV.js"></script>
 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/io/Loader.js"></script>
 		<script type="text/javascript" src="../src/lights/Light.js"></script>
 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
@@ -85,7 +86,7 @@
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
-        -->
+		-->
 		
 		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
 
@@ -105,171 +106,171 @@
 			var canvasRenderer, webglRenderer;
 
 			var mesh, zmesh, lightMesh, geometry;
-            
-            var directionalLight, pointLight;
-            
+			
+			var directionalLight, pointLight;
+			
 			var mouseX = 0;
 			var mouseY = 0;
 
 			var windowHalfX = window.innerWidth >> 1;
 			var windowHalfY = window.innerHeight >> 1;
 
-            var render_canvas = 1, render_gl = 1;
-            var has_gl = 0;
-            
-            var bcanvas = document.getElementById("rcanvas");
-            var bwebgl = document.getElementById("rwebgl");
-            
+			var render_canvas = 1, render_gl = 1;
+			var has_gl = 0;
+			
+			var bcanvas = document.getElementById("rcanvas");
+			var bwebgl = document.getElementById("rwebgl");
+			
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 			init();
-            
+			
 			loop();
-            
-            render_canvas = !has_gl;
-            bwebgl.style.display = has_gl ? "inline" : "none";
-            bcanvas.className = render_canvas ? "button" : "button inactive";
-            
+			
+			render_canvas = !has_gl;
+			bwebgl.style.display = has_gl ? "inline" : "none";
+			bcanvas.className = render_canvas ? "button" : "button inactive";
+			
 			setInterval(loop, 1000/60);
-            
-            function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
-                
-                mesh = new THREE.Mesh( geometry, material );
-                mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
-                mesh.position.x = x;
-                mesh.position.y = y;
-                mesh.position.z = z;
-                mesh.rotation.x = rx;
-                mesh.rotation.y = ry;
-                mesh.rotation.z = rz;
-                mesh.overdraw = true;
-                mesh.updateMatrix();
-                scene.addObject(mesh);
-                
-            }
-            
+			
+			function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
+				
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
+				mesh.position.x = x;
+				mesh.position.y = y;
+				mesh.position.z = z;
+				mesh.rotation.x = rx;
+				mesh.rotation.y = ry;
+				mesh.rotation.z = rz;
+				mesh.overdraw = true;
+				mesh.updateMatrix();
+				scene.addObject(mesh);
+				
+			}
+			
 			function init() {
 
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
 				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
-                camera.position.z = 1000;
-                camera.updateMatrix();
+				camera.position.z = 1000;
+				camera.updateMatrix();
 
 				scene = new THREE.Scene();
 
 				// LIGHTS
 
-                var ambient = new THREE.AmbientLight( 0x101010 );
+				var ambient = new THREE.AmbientLight( 0x101010 );
 				scene.addLight( ambient );
 
-                directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
-                directionalLight.position.x = 1;
-                directionalLight.position.y = 1;
-                directionalLight.position.z = 2;
+				directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
+				directionalLight.position.x = 1;
+				directionalLight.position.y = 1;
+				directionalLight.position.z = 2;
 				directionalLight.position.normalize();
 				scene.addLight( directionalLight );
 
 				pointLight = new THREE.PointLight( 0xffffff );
-                pointLight.position.x = 0;
-                pointLight.position.y = 0;
-                pointLight.position.z = 0;
+				pointLight.position.x = 0;
+				pointLight.position.y = 0;
+				pointLight.position.z = 0;
 				scene.addLight( pointLight );
 
-                // light representation
-                sphere = new Sphere( 100, 16, 8, 1 );
-                lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
-                lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
-                lightMesh.position = pointLight.position;
-                lightMesh.overdraw = true;
-                lightMesh.updateMatrix();
-                scene.addObject(lightMesh);
-
-                // material samples
-                sphere = new Sphere( 100, 32, 32, 1 );
-
-                var y1 = 0, y2 = -200;
-                
-                addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x050505, 0x000000, 0x555555, 30, 1.0 ) );
-                addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x050505 ) );
-
-                addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffffff, 0x555555, 30, 1.0 ) );
-                addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffffff ) );
-
-                addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xff5500, 0x555555, 10, 1.0 ) );
-                addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xff5500 ) );
-
-                addMesh( sphere, 1,    0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffaa00, 0x555555, 30, 1.0 ) );
-                addMesh( sphere, 1,    0, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
-
-                addMesh( sphere, 1,  200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x55ff00, 0x555555, 30, 1.0 ) );
-                addMesh( sphere, 1,  200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x55ff00 ) );
-
-                addMesh( sphere, 1,  400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x0055ff, 0x555555, 30, 1.0 ) );
-                addMesh( sphere, 1,  400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x0055ff ) );
-
-                addMesh( sphere, 1,  600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x5500ff, 0x555555, 30, 1.0 ) );
-                addMesh( sphere, 1,  600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x5500ff ) );
-
-                if ( render_gl ) {
-                    try {
-                        webglRenderer = new THREE.WebGLRenderer( scene );
-                        webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-                        container.appendChild( webglRenderer.domElement );
-                        has_gl = 1;
-                    }
-                    catch (e) {
-                    }
-                }
-                
-                if( render_canvas ) {
-                    canvasRenderer = new THREE.CanvasRenderer();
-                    canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-                    container.appendChild( canvasRenderer.domElement );
-                }
+				// light representation
+				sphere = new Sphere( 100, 16, 8, 1 );
+				lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
+				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
+				lightMesh.position = pointLight.position;
+				lightMesh.overdraw = true;
+				lightMesh.updateMatrix();
+				scene.addObject(lightMesh);
+
+				// material samples
+				sphere = new Sphere( 100, 32, 32, 1 );
+
+				var y1 = 0, y2 = -200;
+				
+				addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x050505, 0x000000, 0x555555, 30, 1.0 ) );
+				addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x050505 ) );
+
+				addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffffff, 0x555555, 30, 1.0 ) );
+				addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffffff ) );
+
+				addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xff5500, 0x555555, 10, 1.0 ) );
+				addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xff5500 ) );
+
+				addMesh( sphere, 1,    0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffaa00, 0x555555, 30, 1.0 ) );
+				addMesh( sphere, 1,    0, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
+
+				addMesh( sphere, 1,  200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x55ff00, 0x555555, 30, 1.0 ) );
+				addMesh( sphere, 1,  200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x55ff00 ) );
+
+				addMesh( sphere, 1,  400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x0055ff, 0x555555, 30, 1.0 ) );
+				addMesh( sphere, 1,  400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x0055ff ) );
+
+				addMesh( sphere, 1,  600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x5500ff, 0x555555, 30, 1.0 ) );
+				addMesh( sphere, 1,  600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x5500ff ) );
+
+				if ( render_gl ) {
+					try {
+						webglRenderer = new THREE.WebGLRenderer( scene );
+						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+						container.appendChild( webglRenderer.domElement );
+						has_gl = 1;
+					}
+					catch (e) {
+					}
+				}
+				
+				if( render_canvas ) {
+					canvasRenderer = new THREE.CanvasRenderer();
+					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+					container.appendChild( canvasRenderer.domElement );
+				}
 
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-                stats.domElement.style.zIndex = 100;
+				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
-                
-                bcanvas.addEventListener("click", toggleCanvas, false);
-                bwebgl.addEventListener("click", toggleWebGL, false);
-
-                function createModel() {
-                    
-                    geometry = new Torus( );
-                    
-                    var s = 80, t = s + 20, y = 200;
-                    
-                    addMesh( geometry, s, -6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x000000, 0x333333, 10, 1.0 ) );
-                    addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x888888, 0x333333, 10, 1.0 ) );
-                    addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0xff5500, 10, 1.0 ) );
-                    addMesh( geometry, s,    0, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0xffaa00, 10, 1.0 ) );
-                    addMesh( geometry, s,  2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x55ff00, 10, 1.0 ) );
-                    addMesh( geometry, s,  4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x0055ff, 10, 1.0 ) );
-                    addMesh( geometry, s,  6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x5500ff, 10, 1.0 ) );
-
-                }
-
-                loadAsync( "obj/torus/Torus.js", createModel);
+				
+				bcanvas.addEventListener("click", toggleCanvas, false);
+				bwebgl.addEventListener("click", toggleWebGL, false);
+
+				var loader = new THREE.Loader();
+				loader.loadAsync( "obj/torus/Torus.js", function() { createScene( new Torus() ) } );
+				//loader.loadWorker( "obj/torus/Torus_slim.js", function( geometry ) { createScene( geometry ) } );
+
+			}
+
+			function createScene( geometry ) {
+				
+				var s = 80, t = s + 20, y = 200;
+				
+				addMesh( geometry, s, -6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x000000, 0x333333, 10, 1.0 ) );
+				addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x888888, 0x333333, 10, 1.0 ) );
+				addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0xff5500, 10, 1.0 ) );
+				addMesh( geometry, s,    0, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0xffaa00, 10, 1.0 ) );
+				addMesh( geometry, s,  2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x55ff00, 10, 1.0 ) );
+				addMesh( geometry, s,  4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x0055ff, 10, 1.0 ) );
+				addMesh( geometry, s,  6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x5500ff, 10, 1.0 ) );
 
 			}
 
-            function loadAsync( url, callback ) {
-                
-                var el = document.createElement( 'script' );
-                el.type = 'text/javascript';
-                el.onload = callback;
-                el.src = url;
-                document.getElementsByTagName("head")[0].appendChild(el);
+			function loadAsync( url, callback ) {
+				
+				var el = document.createElement( 'script' );
+				el.type = 'text/javascript';
+				el.onload = callback;
+				el.src = url;
+				document.getElementsByTagName("head")[0].appendChild(el);
 
-            }
+			}
 
-            
+			
 			function onDocumentMouseMove(event) {
 
 				mouseX = ( event.clientX - windowHalfX );
@@ -277,28 +278,28 @@
 
 			}
 
-            var r = 0;
-            
+			var r = 0;
+			
 			function loop() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.updateMatrix();
-               
-                
-                /*
-                for(var i=0; i<scene.objects.length; ++i) {
-                    scene.objects[i].rotation.x += 0.0025;                        
-                    scene.objects[i].updateMatrix();
-                }
-                */
-                lightMesh.position.x = 700*Math.cos(r);
-                lightMesh.position.z = 700*Math.sin(r);
-                lightMesh.updateMatrix();
-
-                r += 0.01;
-                
-                
+			   
+				
+				/*
+				for(var i=0; i<scene.objects.length; ++i) {
+					scene.objects[i].rotation.x += 0.0025;                        
+					scene.objects[i].updateMatrix();
+				}
+				*/
+				lightMesh.position.x = 700*Math.cos(r);
+				lightMesh.position.z = 700*Math.sin(r);
+				lightMesh.updateMatrix();
+
+				r += 0.01;
+				
+				
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
@@ -306,42 +307,42 @@
 
 			}
 
-            function log(text) {
-            
-                var e = document.getElementById("log");
-                e.innerHTML = text + "<br/>" + e.innerHTML;
-                
-            }
-            
-            function toggleCanvas() {
-            
-                render_canvas = !render_canvas;
-                bcanvas.className = render_canvas ? "button" : "button inactive";
-                
-                render_gl = !render_canvas;
-                bwebgl.className = render_gl ? "button" : "button inactive";
-                
-                if( has_gl )
-                    webglRenderer.domElement.style.display = render_gl ? "block" : "none";
-                
-                canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
-                
-            }
-            
-            function toggleWebGL() {
-            
-                render_gl = !render_gl;
-                bwebgl.className = render_gl ? "button" : "button inactive";
-                
-                render_canvas = !render_gl;
-                bcanvas.className = render_canvas ? "button" : "button inactive";
-                
-                if( has_gl )
-                    webglRenderer.domElement.style.display = render_gl ? "block" : "none";
-                    
-                canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
-                
-            }
+			function log(text) {
+			
+				var e = document.getElementById("log");
+				e.innerHTML = text + "<br/>" + e.innerHTML;
+				
+			}
+			
+			function toggleCanvas() {
+			
+				render_canvas = !render_canvas;
+				bcanvas.className = render_canvas ? "button" : "button inactive";
+				
+				render_gl = !render_canvas;
+				bwebgl.className = render_gl ? "button" : "button inactive";
+				
+				if( has_gl )
+					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
+				
+				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
+				
+			}
+			
+			function toggleWebGL() {
+			
+				render_gl = !render_gl;
+				bwebgl.className = render_gl ? "button" : "button inactive";
+				
+				render_canvas = !render_gl;
+				bcanvas.className = render_canvas ? "button" : "button inactive";
+				
+				if( has_gl )
+					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
+					
+				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
+				
+			}
 		</script>
 
 	</body>

src/io/Loader.js

+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.Loader = function() {
+};
+
+THREE.Loader.prototype = {
+	
+	loadAsync: function( url, callback ) {
+		
+		var element = document.createElement( 'script' );
+		element.type = 'text/javascript';
+		element.onload = callback;
+		element.src = url;
+		document.getElementsByTagName( "head" )[ 0 ].appendChild( element );
+
+	},
+
+	loadWorker: function ( url, callback, urlbase ) {
+		
+		var s = (new Date).getTime(),
+			worker = new Worker( url );
+
+		worker.onmessage = function( event ) {
+		
+			THREE.Loader.prototype.createModel( event.data, callback, urlbase );
+			
+		};
+		
+		worker.postMessage( s );
+		
+	},
+
+	createModel: function ( data, callback, urlbase ) {
+		
+		var Model = function ( urlbase ) {
+			
+			var scope = this;
+
+			THREE.Geometry.call(this);
+			
+			init_materials();
+			init_vertices();
+			init_uvs();
+			init_faces();
+			
+			this.computeCentroids();
+			this.computeNormals();
+			
+			function init_vertices() {
+			
+				var i, l, d;
+				
+				for( i = 0, l = data.vertices.length; i < l; i++ ) {
+					
+					d = data.vertices[i];
+					v( d[0], d[1], d[2] );
+					
+				}
+			
+			}
+
+			function init_uvs() {
+			
+				var i, l, d;
+				
+				for( i = 0, l = data.uvs.length; i < l; i++ ) {
+					
+					d = data.uvs[i];
+					if ( d.length == 6 ) {
+						
+						uv( d[0], d[1], d[2], d[3], d[4], d[5] );
+						
+					} else if ( d.length == 8 ) {
+					
+						uv( d[0], d[1], d[2], d[3], d[4], d[5], d[6], d[7] );
+					
+					}
+						
+				}
+			
+			}
+
+			function init_faces() {
+			
+				var i, l, d;
+				
+				for( i = 0, l = data.faces.length; i < l; i++ ) {
+					
+					d = data.faces[i];
+					
+					if ( d.length == 4 ) {
+						
+						f3( d[0], d[1], d[2], d[3] );
+						
+					} else if ( d.length == 5 ) {
+					
+						f4( d[0], d[1], d[2], d[3], d[4] );
+					
+					} else if ( d.length == 7 ) {
+					
+						f3n( d[0], d[1], d[2], d[3], d[4], d[5], d[6] );
+					
+					} else if ( d.length == 9 ) {
+					
+						f4n( d[0], d[1], d[2], d[3], d[4], d[5], d[6], d[7], d[8] );
+					
+					}
+						
+				}
+			
+			}
+			
+			function v( x, y, z ) {
+				
+				scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
+				
+			}
+
+			function f3( a, b, c, mi ) {
+				
+				var material = scope.materials[ mi ];
+				scope.faces.push( new THREE.Face3( a, b, c, null, material ) );
+				
+			}
+
+			function f4( a, b, c, d, mi ) {
+				
+				var material = scope.materials[ mi ];
+				scope.faces.push( new THREE.Face4( a, b, c, d, null, material ) );
+				
+			}
+
+			function f3n( a, b, c, mi, n1, n2, n3 ) {
+				
+				var material = scope.materials[ mi ],
+					n1x = data.normals[n1][0],
+					n1y = data.normals[n1][1],
+					n1z = data.normals[n1][2],
+					n2x = data.normals[n2][0],
+					n2y = data.normals[n2][1],
+					n2z = data.normals[n2][2],
+					n3x = data.normals[n3][0],
+					n3y = data.normals[n3][1],
+					n3z = data.normals[n3][2];
+				
+				scope.faces.push( new THREE.Face3( a, b, c, 
+								  [new THREE.Vector3( n1x, n1y, n1z ), new THREE.Vector3( n2x, n2y, n2z ), new THREE.Vector3( n3x, n3y, n3z )], 
+								  material ) );
+				
+			}
+
+			function f4n( a, b, c, d, mi, n1, n2, n3, n4 ) {
+				
+				var material = scope.materials[ mi ],
+					n1x = data.normals[n1][0],
+					n1y = data.normals[n1][1],
+					n1z = data.normals[n1][2],
+					n2x = data.normals[n2][0],
+					n2y = data.normals[n2][1],
+					n2z = data.normals[n2][2],
+					n3x = data.normals[n3][0],
+					n3y = data.normals[n3][1],
+					n3z = data.normals[n3][2],
+					n4x = data.normals[n4][0],
+					n4y = data.normals[n4][1],
+					n4z = data.normals[n4][2];
+				
+				scope.faces.push( new THREE.Face4( a, b, c, d,
+								  [new THREE.Vector3( n1x, n1y, n1z ), new THREE.Vector3( n2x, n2y, n2z ), new THREE.Vector3( n3x, n3y, n3z ), new THREE.Vector3( n4x, n4y, n4z )], 
+								  material ) );
+				
+			}
+
+			function uv( u1, v1, u2, v2, u3, v3, u4, v4 ) {
+				
+				var uv = [];
+				uv.push( new THREE.UV( u1, v1 ) );
+				uv.push( new THREE.UV( u2, v2 ) );
+				uv.push( new THREE.UV( u3, v3 ) );
+				if ( u4 && v4 ) uv.push( new THREE.UV( u4, v4 ) );
+				scope.uvs.push( uv );
+				
+			}
+			
+			function init_materials() {
+				
+				scope.materials = [];
+				for( var i = 0; i < data.materials.length; ++i ) {
+					scope.materials[i] = [ create_material( data.materials[i], urlbase ) ];
+				}
+				
+			}
+		
+			function is_pow2( n ) {
+				
+				var l = Math.log(n) / Math.LN2;
+				return Math.floor(l) == l;
+				
+			}
+			
+			function nearest_pow2(n) {
+				
+				var l = Math.log(n) / Math.LN2;
+				return Math.pow( 2, Math.round(l) );
+				
+			}
+			
+			function create_material( m ) {
+				
+				var material, texture, image, color;
+				
+				if( m.map_diffuse && urlbase ) {
+					
+					texture = document.createElement( 'canvas' );
+					material = new THREE.MeshBitmapMaterial( texture );
+					
+					image = new Image();
+					image.onload = function () {
+						
+						if ( !is_pow2( this.width ) || !is_pow2( this.height ) ) {
+						
+							var w = nearest_pow2( this.width ),
+								h = nearest_pow2( this.height );
+							
+							material.bitmap.width = w;
+							material.bitmap.height = h;
+							material.bitmap.getContext("2d").drawImage( this, 0, 0, w, h );
+							
+						} else {
+							
+							material.bitmap = this;
+							
+						}
+						
+						material.loaded = 1;
+						
+					};
+					
+					image.src = urlbase + "/" + m.map_diffuse;
+					
+				} else if( m.col_diffuse ) {
+					
+					color = (m.col_diffuse[0]*255 << 16) + (m.col_diffuse[1]*255 << 8) + m.col_diffuse[2]*255;
+					material = new THREE.MeshColorFillMaterial( color, m.transparency );
+					
+				} else if( m.a_dbg_color ) {
+					
+					material = new THREE.MeshColorFillMaterial( m.a_dbg_color );
+					
+				} else {
+					
+					material = new THREE.MeshColorFillMaterial( 0xffeeeeee );
+					
+				}
+
+				return material;
+			}
+			
+		}
+
+		Model.prototype = new THREE.Geometry();
+		Model.prototype.constructor = Model;
+		
+		callback( new Model( urlbase ) );
+
+	}
+	
+};
\ No newline at end of file

utils/Builder.py

@@ -20,6 +20,7 @@ files.append('core/Face4.js')
 files.append('core/UV.js')
 files.append('core/Geometry.js')
 files.append('cameras/Camera.js')
+files.append('io/Loader.js')
 files.append('lights/Light.js')
 files.append('lights/AmbientLight.js')
 files.append('lights/DirectionalLight.js')

utils/BuilderCanvas.py

@@ -20,6 +20,7 @@ files.append('core/Face4.js')
 files.append('core/UV.js')
 files.append('core/Geometry.js')
 files.append('cameras/Camera.js')
+files.append('io/Loader.js')
 files.append('lights/Light.js')
 files.append('lights/AmbientLight.js')
 files.append('lights/DirectionalLight.js')

utils/BuilderDOM.py

@@ -19,6 +19,7 @@ files.append('core/Face3.js')
 files.append('core/Face4.js')
 files.append('core/UV.js')
 files.append('cameras/Camera.js')
+files.append('io/Loader.js')
 files.append('objects/Object3D.js')
 files.append('objects/Particle.js')
 files.append('materials/ParticleDOMMaterial.js')

utils/BuilderDebug.py

@@ -20,6 +20,7 @@ files.append('core/Face4.js')
 files.append('core/UV.js')
 files.append('core/Geometry.js')
 files.append('cameras/Camera.js')
+files.append('io/Loader.js')
 files.append('lights/Light.js')
 files.append('lights/AmbientLight.js')
 files.append('lights/DirectionalLight.js')

utils/BuilderSVG.py

@@ -20,6 +20,7 @@ files.append('core/Face4.js')
 files.append('core/UV.js')
 files.append('core/Geometry.js')
 files.append('cameras/Camera.js')
+files.append('io/Loader.js')
 files.append('lights/Light.js')
 files.append('lights/AmbientLight.js')
 files.append('lights/DirectionalLight.js')

utils/BuilderWebGL.py

@@ -20,6 +20,7 @@ files.append('core/Face4.js')
 files.append('core/UV.js')
 files.append('core/Geometry.js')
 files.append('cameras/Camera.js')
+files.append('io/Loader.js')
 files.append('lights/Light.js')
 files.append('lights/AmbientLight.js')
 files.append('lights/DirectionalLight.js')

utils/REVISION

-27
+28