Added OBJ -> Three.js converter.

Added OBJ converter test example.

Modified Three.js to handle converted models:

 - extended WebGL renderer to use texturing
   - broke down model into multiple VBOs according to materials
   - textures are lazy created when images get loaded
     (converter takes care of resizing images to nearest power of 2
      dimensions using 2d canvas)

 - changed material array semantics in Mesh object
    - before: multiple materials were applied to all faces (broken in WebGL, needs multitexturing shader)
    - now: there is only single material per face, but one mesh can have faces with different materials

 - added per vertex normals (to get smooth shading in WebGL)

examples/geometry/primitives/Sphere.js

@@ -43,7 +43,7 @@ var Sphere = function ( radius, segments_width, segments_height ) {
 
 	}
 
-	var iVerNum = aVtc.length;
+	var n1, n2, n3, iVerNum = aVtc.length;
 
 	for ( j = 0; j < iVerNum; j++ ) {
 
@@ -70,15 +70,31 @@ var Sphere = function ( radius, segments_width, segments_height ) {
 				var aP4uv = new THREE.UV( 1 - fI0, fJ1 );
 
 				if ( j < ( aVtc.length - 1 ) ) {
+                    n1 = this.vertices[aP1].position.clone();
+                    n2 = this.vertices[aP2].position.clone();
+                    n3 = this.vertices[aP3].position.clone();
+                    n1.normalize();
+                    n2.normalize();
+                    n3.normalize();
 
-					this.faces.push( new THREE.Face3( aP1, aP2, aP3 ) );
+					this.faces.push( new THREE.Face3( aP1, aP2, aP3, [new THREE.Vector3(n1.x,n1.y,n1.z), new THREE.Vector3(n2.x,n2.y,n2.z), new THREE.Vector3(n3.x,n3.y,n3.z)] ) );
+
+					//this.faces.push( new THREE.Face3( aP1, aP2, aP3 ) );
 					this.uvs.push( [ aP1uv, aP2uv, aP3uv ] );
 
 				}
 
 				if ( j > 1 ) {
 
-					this.faces.push( new THREE.Face3( aP1, aP3, aP4 ) );
+                    n1 = this.vertices[aP1].position.clone();
+                    n2 = this.vertices[aP3].position.clone();
+                    n3 = this.vertices[aP4].position.clone();
+                    n1.normalize();
+                    n2.normalize();
+                    n3.normalize();
+
+					this.faces.push( new THREE.Face3( aP1, aP3, aP4, [new THREE.Vector3(n1.x,n1.y,n1.z), new THREE.Vector3(n2.x,n2.y,n2.z), new THREE.Vector3(n3.x,n3.y,n3.z)] ) );
+					//this.faces.push( new THREE.Face3( aP1, aP3, aP4 ) );
 					this.uvs.push( [ aP1uv, aP3uv, aP4uv ] );
 
 				}

examples/obj/female02/.htaccess

+<Files *.js>
+SetOutputFilter DEFLATE
+</Files>

examples/obj/female02/female02.mtl

+# Material Count: 6
+newmtl FrontColorNoCullingID__01_-_Default1noCulli
+Ns 154.901961
+Ka 0.000000 0.000000 0.000000
+Kd 0.800000 0.800000 0.800000
+Ks 0.165000 0.165000 0.165000
+Ni 1.000000
+d 1.000000
+illum 2
+map_Kd _01_-_Default1noCulling.JPG
+
+
+newmtl _02_-_Default1noCulli__02_-_Default1noCulli
+Ns 154.901961
+Ka 0.000000 0.000000 0.000000
+Kd 0.640000 0.640000 0.640000
+Ks 0.165000 0.165000 0.165000
+Ni 1.000000
+d 1.000000
+illum 2
+map_Kd _02_-_Default1noCulling.JPG
+
+
+newmtl _01_-_Default1noCulli__01_-_Default1noCulli
+Ns 154.901961
+Ka 0.000000 0.000000 0.000000
+Kd 0.640000 0.640000 0.640000
+Ks 0.165000 0.165000 0.165000
+Ni 1.000000
+d 1.000000
+illum 2
+map_Kd _01_-_Default1noCulling.JPG
+
+
+newmtl FrontColorNoCullingID__03_-_Default1noCulli
+Ns 154.901961
+Ka 0.000000 0.000000 0.000000
+Kd 0.800000 0.800000 0.800000
+Ks 0.165000 0.165000 0.165000
+Ni 1.000000
+d 1.000000
+illum 2
+map_Kd _03_-_Default1noCulling.JPG
+
+
+newmtl _03_-_Default1noCulli__03_-_Default1noCulli
+Ns 154.901961
+Ka 0.000000 0.000000 0.000000
+Kd 0.640000 0.640000 0.640000
+Ks 0.165000 0.165000 0.165000
+Ni 1.000000
+d 1.000000
+illum 2
+map_Kd _03_-_Default1noCulling.JPG
+
+
+newmtl FrontColorNoCullingID__02_-_Default1noCulli
+Ns 154.901961
+Ka 0.000000 0.000000 0.000000
+Kd 0.800000 0.800000 0.800000
+Ks 0.165000 0.165000 0.165000
+Ni 1.000000
+d 1.000000
+illum 2
+map_Kd _02_-_Default1noCulling.JPG
+
+

examples/obj/female02/readme.txt

+Model by Reallusion iClone from Google 3d Warehouse:
+
+http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1
\ No newline at end of file

examples/obj_convert_test.html

+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - OBJ converter test</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background: #fff;
+				margin: 0px;
+				overflow: hidden;
+                font-family:georgia;
+                text-align:center;
+			}
+            h1 { }
+            a { color:skyblue }
+            canvas { pointer-events:none; z-index:10; position:relative }
+            #log { position:absolute; top:0 }
+            #d { text-align:center; margin:1em 0 -15em 0; z-index:0; position:relative; display:block }
+            .button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
+            .inactive { background:#999; color:#eee }
+		</style>
+	</head>
+	
+    <body>
+        <div id="d">
+            <h1>OBJ to Three.js converter test</h1>
+
+            <span id="rcanvas" class="button inactive">2d canvas renderer</span>
+            <span id="rwebgl" class="button">WebGL renderer</span>
+            <br/>
+
+            <p>Model by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion iClone</a>.
+            <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.
+        </div>
+        
+        <div id="log"></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>
+		<script type="text/javascript" src="../src/core/Vector3.js"></script>
+		<script type="text/javascript" src="../src/core/Vector4.js"></script>
+		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Vertex.js"></script>
+		<script type="text/javascript" src="../src/core/Face3.js"></script>
+		<script type="text/javascript" src="../src/core/Face4.js"></script>
+		<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/lights/Light.js"></script>
+		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
+		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
+		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
+		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
+		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
+		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
+		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
+		<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/female02/female02.js"></script>
+        -->
+
+		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
+
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight;
+			var FLOOR = -200;
+
+			var container;
+			var stats;
+
+			var camera;
+			var scene;
+			var canvasRenderer, webglRenderer;
+
+			var mesh, zmesh, geometry;
+            
+			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");
+            
+			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";
+            
+			setInterval(loop, 1000/60);
+
+
+			function init() {
+
+				container = document.createElement('div');
+				document.body.appendChild(container);
+
+				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
+                camera.position.z = 500;
+                camera.updateMatrix();
+
+				scene = new THREE.Scene();
+                
+                // GROUND
+                
+                var x = document.createElement( "canvas" );
+                var xc = x.getContext("2d");
+                x.width = x.height = 128;
+                xc.fillStyle = "#fff";
+                xc.fillRect(0, 0, 128, 128);
+                xc.fillStyle = "#000";
+                xc.fillRect(0, 0, 64, 64);
+                xc.fillStyle = "#999";
+                xc.fillRect(32, 32, 32, 32);
+                xc.fillStyle = "#000";
+                xc.fillRect(64, 64, 64, 64);
+                xc.fillStyle = "#555";
+                xc.fillRect(96, 96, 32, 32);
+                
+                var xm = new THREE.MeshBitmapUVMappingMaterial( x );
+                xm.loaded = 1;
+                
+                geometry = new Plane( 100, 100, 15, 10 );
+                for(var i=0; i<geometry.uvs.length; i++) {
+                    var uvs = geometry.uvs[i];
+                    for ( j = 0, jl = uvs.length; j < jl; j++ ) {
+                        uvs[j].u *= 10;
+                        uvs[j].v *= 10;
+                    }
+                    
+                }
+                mesh = new THREE.Mesh( geometry, xm );
+                mesh.position.x = 0;
+                mesh.position.y = FLOOR;
+                mesh.position.z = 0;
+                mesh.rotation.x = 1.57;
+                mesh.scale.x = mesh.scale.y = mesh.scale.z = 10;
+                mesh.doubleSided = true;
+                mesh.updateMatrix();
+                scene.add(mesh);
+                
+                // SPHERES
+                
+                sphere = new Sphere( 100, 16, 8 );
+                for (var i=0; i<10; i++) {
+                    mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffdddddd ) );
+                    mesh.position.x = 500 * (Math.random() - 0.5);
+                    mesh.position.y = 300 * (Math.random() - 0) + FLOOR;
+                    mesh.position.z = 100 * (Math.random() - 1);
+                    mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * (Math.random() + 0.5);
+                    //mesh.doubleSided = true;
+                    mesh.overdraw = true;
+                    mesh.updateMatrix();
+                    scene.add(mesh);
+                }
+                
+
+				// LIGHTS
+
+				var ambient = new THREE.AmbientLight( 0x221100 );
+				scene.addLight( ambient );
+
+				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
+                directionalLight.position.y = -70;
+                directionalLight.position.z = 100;
+				directionalLight.position.normalize();
+				scene.addLight( directionalLight );
+
+				var pointLight = new THREE.PointLight( 0xff0000, 1 );
+				scene.addLight( pointLight );
+
+
+                if ( render_gl ) {
+                    try {
+                        webglRenderer = new THREE.WebGLRenderer();
+                        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';
+				container.appendChild( stats.domElement );
+                
+                bcanvas.addEventListener("click", toggleCanvas, false);
+                bwebgl.addEventListener("click", toggleWebGL, false);
+                                
+                function createModel() {
+                    
+                    // MESH
+                    
+                    geometry = new Female02( "obj/female02" );
+                    zmesh = new THREE.Mesh( geometry, geometry.materials, 1 );
+                    zmesh.position.z = 50;
+                    zmesh.position.y = FLOOR;
+                    zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 3;
+                    //zmesh.doubleSided = true;
+                    //zmesh.flipSided = true;
+                    zmesh.overdraw = true;
+                    zmesh.updateMatrix();
+                    scene.add(zmesh);
+
+                    // PLANES with all materials from the model
+                    
+                    createMaterialsPalette( geometry.materials, 100 );
+                }
+                
+                loadAsync( "obj/female02/female02.js", createModel);
+
+			}
+
+            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 createMaterialsPalette( materials, size ) {
+                
+                for ( var i=0; i<materials.length; ++i ) {
+                    
+                    // material
+                    mesh = new THREE.Mesh( new Plane( size, size ), materials[i] );
+                    mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
+                    mesh.position.y = FLOOR + size/2;
+                    mesh.position.z = -100;
+                    mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
+                    mesh.doubleSided = true;
+                    mesh.updateMatrix();
+                    scene.add(mesh);
+                    
+                    // number
+                    var x = document.createElement( "canvas" );
+                    var xc = x.getContext("2d");
+                    x.width = x.height = 128;
+                    xc.shadowColor = "#000";
+                    xc.shadowBlur = 7;
+                    xc.fillStyle = "orange";
+                    xc.font = "50pt arial bold";
+                    xc.fillText(i, 10, 64);
+                    
+                    var xm = new THREE.MeshBitmapUVMappingMaterial( x );
+                    xm.loaded = 1;
+                    
+                    mesh = new THREE.Mesh( new Plane( size, size ), xm );
+                    mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
+                    mesh.position.y = FLOOR + size/2;
+                    mesh.position.z = -99;
+                    mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
+                    mesh.doubleSided = true;
+                    mesh.updateMatrix();
+                    scene.add(mesh);
+                }
+                
+            }
+            
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX );
+				mouseY = ( event.clientY - windowHalfY );
+
+			}
+
+			function loop() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+				camera.updateMatrix();
+
+                if ( zmesh && 0 ) {
+                    zmesh.rotation.y += 0.005;
+                    zmesh.updateMatrix();
+                }
+                                
+				if ( render_canvas ) canvasRenderer.render( scene, camera );
+				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
+
+				stats.update();
+
+			}
+
+            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>
+</html>

src/core/Face3.js

@@ -2,16 +2,19 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-THREE.Face3 = function ( a, b, c, normal, color ) {
+THREE.Face3 = function ( a, b, c, normal, color, material ) {
 
 	this.a = a;
 	this.b = b;
 	this.c = c;
 
 	this.centroid = new THREE.Vector3();
-	this.normal = normal || new THREE.Vector3();
+    this.normal = normal instanceof THREE.Vector3 ? normal : new THREE.Vector3();
 
 	this.color = color || new THREE.Color( 0xff000000 );
+    
+	this.vertexNormals =  normal instanceof Array ? normal : [];
+    this.material = material || 0;
 
 };
 

src/core/Face4.js

@@ -2,7 +2,7 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-THREE.Face4 = function ( a, b, c, d, normal, color ) {
+THREE.Face4 = function ( a, b, c, d, normal, color, material ) {
 
 	this.a = a;
 	this.b = b;
@@ -10,12 +10,16 @@ THREE.Face4 = function ( a, b, c, d, normal, color ) {
 	this.d = d;
 
 	this.centroid = new THREE.Vector3();
-	this.normal = normal || new THREE.Vector3();
+	this.normal = normal instanceof THREE.Vector3 ? normal : new THREE.Vector3();
 
 	this.color = color || new THREE.Color( 0xff000000 );
 
+	this.vertexNormals = normal instanceof Array ? normal : [];
+    this.material = material || 0;
+    
 };
 
+
 THREE.Face4.prototype = {
 
 	// TODO: Dupe? (Geometry/computeCentroid)

src/core/Geometry.js

@@ -43,9 +43,9 @@ THREE.Geometry.prototype = {
 
 	},
 
-	computeNormals: function () {
+	computeNormals: function ( useVertexNormals ) {
 
-		var v, vl, vertex, f, fl, face, vA, vB, vC, cb = new THREE.Vector3(), ab = new THREE.Vector3();
+		var n, nl, v, vl, vertex, f, fl, face, vA, vB, vC, cb = new THREE.Vector3(), ab = new THREE.Vector3();
 
 		for ( v = 0, vl = this.vertices.length; v < vl; v++ ) {
 
@@ -58,25 +58,86 @@ THREE.Geometry.prototype = {
 
 			face = this.faces[ f ];
 
-			vA = this.vertices[ face.a ];
-			vB = this.vertices[ face.b ];
-			vC = this.vertices[ face.c ];
+            if ( useVertexNormals && face.vertexNormals.length  ) {
+                
+                // set face normal to average of vertex normals
+                
+                cb.set( 0, 0, 0 );
 
-			cb.sub( vC.position, vB.position );
-			ab.sub( vA.position, vB.position );
-			cb.crossSelf( ab );
+                for ( n = 0, nl = face.normal.length; n < nl; n++ ) {
+                    cb.x += face.vertexNormals[n].x;
+                    cb.y += face.vertexNormals[n].y;
+                    cb.z += face.vertexNormals[n].z;
+                }
 
-			if ( !cb.isZero() ) {
+                cb.x /= 3;
+                cb.y /= 3;
+                cb.z /= 3;
 
-				cb.normalize();
+                if ( !cb.isZero() ) {
 
-			}
+                    cb.normalize();
+
+                }
+
+                face.normal.copy( cb );
+            }
+            
+            else {
+                
+                vA = this.vertices[ face.a ];
+                vB = this.vertices[ face.b ];
+                vC = this.vertices[ face.c ];
+
+                cb.sub( vC.position, vB.position );
+                ab.sub( vA.position, vB.position );
+                cb.crossSelf( ab );
+
+                if ( !cb.isZero() ) {
+
+                    cb.normalize();
+
+                }
 
-			face.normal.copy( cb );
+                face.normal.copy( cb );
+            }
 
 		}
 
 	},
+    
+    computeBoundingBox: function ( ) {
+        
+        if ( this.vertices.length > 0 ) {
+            
+            this.bbox = { 'x': [ this.vertices[ 0 ].position.x, this.vertices[ 0 ].position.x ], 
+                          'y': [ this.vertices[ 0 ].position.y, this.vertices[ 0 ].position.y ], 
+                          'z': [ this.vertices[ 0 ].position.z, this.vertices[ 0 ].position.z ] };
+            
+            var v, vl;
+            
+            for ( v = 1, vl = this.vertices.length; v < vl; v++ ) {
+
+                vertex = this.vertices[ v ];
+                
+                if ( vertex.position.x < this.bbox.x[ 0 ] )
+                    this.bbox.x[ 0 ] = vertex.position.x;
+                else if ( vertex.position.x > this.bbox.x[ 1 ] )
+                    this.bbox.x[ 1 ] = vertex.position.x;
+
+                if ( vertex.position.y < this.bbox.y[ 0 ] )
+                    this.bbox.y[ 0 ] = vertex.position.y;
+                else if ( vertex.position.y > this.bbox.y[ 1 ] )
+                    this.bbox.y[ 1 ] = vertex.position.y;
+
+                if ( vertex.position.z < this.bbox.z[ 0 ] )
+                    this.bbox.z[ 0 ] = vertex.position.z;
+                else if ( vertex.position.z > this.bbox.z[ 1 ] )
+                    this.bbox.z[ 1 ] = vertex.position.z;
+
+            }
+        }
+    },
 
 	toString: function () {
 

src/materials/ParticleDOMMaterial.js

-/**
- * @author mr.doob / http://mrdoob.com/
- */
-
-THREE.ParticleDOMMaterial = function ( domElement ) {
-
-	this.domElement = domElement;
-
-	this.toString = function () {
-
-		return 'THREE.ParticleDOMMaterial ( domElement: ' + this.domElement + ' )';
-
-	};
-
-};
+/**
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+THREE.ParticleDOMMaterial = function ( domElement ) {
+
+	this.domElement = domElement;
+
+	this.toString = function () {
+
+		return 'THREE.ParticleDOMMaterial ( domElement: ' + this.domElement + ' )';
+
+	};
+
+};

src/objects/Mesh.js

@@ -2,7 +2,7 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-THREE.Mesh = function ( geometry, material ) {
+THREE.Mesh = function ( geometry, material, normUVs ) {
 
 	THREE.Object3D.call( this );
 
@@ -14,7 +14,51 @@ THREE.Mesh = function ( geometry, material ) {
 
 	this.overdraw = false;
 
+    this.materialFaces = {};
+        
+    this.sortFacesByMaterial();
+    if( normUVs ) this.normalizeUVs();
+
+    this.geometry.computeBoundingBox();
+    
 };
 
 THREE.Mesh.prototype = new THREE.Object3D();
 THREE.Mesh.prototype.constructor = THREE.Mesh;
+
+THREE.Mesh.prototype.sortFacesByMaterial = function () {
+    
+    var f, fl, face, material;
+
+    for ( f = 0, fl = this.geometry.faces.length; f < fl; f++ ) {
+
+        face = this.geometry.faces[ f ];
+        material = face.material;
+
+        if ( this.materialFaces[material] == undefined ) 
+            this.materialFaces[material] = { 'faces': [] };
+
+        this.materialFaces[material].faces.push( f );
+
+    }
+
+}
+    
+THREE.Mesh.prototype.normalizeUVs = function () {
+
+    var i,j;
+    
+    for ( i = 0, l = this.geometry.uvs.length; i < l; i++ ) {
+
+        var uvs = this.geometry.uvs[i];
+        
+        for ( j = 0, jl = uvs.length; j < jl; j++ ) {
+        
+            // texture repeat
+            // (WebGL does this by default but canvas renderer needs to do it explicitly)
+            
+            if( uvs[j].u != 1.0 ) uvs[j].u = uvs[j].u - Math.floor(uvs[j].u);
+            if( uvs[j].v != 1.0 ) uvs[j].v = uvs[j].v - Math.floor(uvs[j].v);
+        }
+    }                
+}

src/renderers/CanvasRenderer.js

@@ -358,7 +358,6 @@ THREE.CanvasRenderer = function () {
 							_context.moveTo( v1x, v1y );
 							_context.lineTo( v2x, v2y );
 							_context.lineTo( v3x, v3y );
-							_context.lineTo( v4x, v4y );
 							_context.lineTo( v1x, v1y );
 							_context.closePath();
 
@@ -668,6 +667,10 @@ THREE.CanvasRenderer = function () {
 
 		_context.save();
 		_context.clip();
+        
+        // debug triangle outline
+        //_context.strokeStyle = "black";
+        //_context.stroke();
 
 		denom = uv1u * ( uv3v - uv2v ) - uv2u * uv3v + uv3u * uv2v + ( uv2u - uv3u ) * uv1v;
 

src/renderers/Projector.js

@@ -96,7 +96,7 @@ THREE.Projector = function() {
 
 								_face3.z = Math.max( v1.positionScreen.z, Math.max( v2.positionScreen.z, v3.positionScreen.z ) );
 
-								_face3.material = object.material;
+								_face3.material = [ object.material[face.material] ];
 								_face3.overdraw = object.overdraw;
 								_face3.uvs = object.geometry.uvs[ f ];
 								_face3.color = face.color;
@@ -135,7 +135,7 @@ THREE.Projector = function() {
 
 								_face4.z = Math.max( v1.positionScreen.z, Math.max( v2.positionScreen.z, Math.max( v3.positionScreen.z, v4.positionScreen.z ) ) );
 
-								_face4.material = object.material;
+								_face4.material = [ object.material[face.material] ];
 								_face4.overdraw = object.overdraw;
 								_face4.uvs = object.geometry.uvs[ f ];
 								_face4.color = face.color;