* MeshBitmapUVMappingMaterial -> MeshBitmapMaterial. Second param is mode,...

* MeshBitmapUVMappingMaterial -> MeshBitmapMaterial. Second param is mode, which is THREE.MeshBitmapMaterialMode.UVMAPPING by default.
* Removed MeshFaceColorFillMaterial and MeshFaceColorStrokeMaterial
* Added MeshFaceMaterial ( it uses the face.material for that pass )
* CanvasRenderer and SVGRenderer per face material logic changed.
* SVGRenderer supports particles again.
* WebGLRenderer currently broken :/
* Code clean up

examples/camera_free.html

@@ -39,11 +39,10 @@
 		<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/MeshBitmapMaterial.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/MeshFaceMaterial.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>

examples/geometry_cube.html

@@ -74,10 +74,10 @@
 
 				for (var i = 0; i < geometry.faces.length; i++) {
 
-					geometry.faces[i].color.setRGBA( Math.random() * 0.5, Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 1 );
+					geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 1 ) ];
 				}
 
-				cube = new THREE.Mesh(geometry, new THREE.MeshFaceColorFillMaterial() );
+				cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial() );
 				cube.position.y = 150;
 				scene.addObject( cube );
 

examples/geometry_earth.html

@@ -98,7 +98,7 @@
 				canvas.width = 32;
 				canvas.height = 32;
 
-				var material =  new THREE.MeshBitmapUVMappingMaterial( canvas );
+				var material =  new THREE.MeshBitmapMaterial( canvas );
 
 				var image = new Image();
 

examples/geometry_terrain.html

@@ -145,7 +145,7 @@
 
 				var heightMap = height( 1024, 1024 );
 				var textureMap = shadow( heightMap );
-				var material = new THREE.MeshBitmapUVMappingMaterial( textureMap );
+				var material = new THREE.MeshBitmapMaterial( textureMap );
 
 				var quality = 20;
 				var quality1 = quality + 1;

examples/geometry_vr.html

@@ -121,7 +121,7 @@
 
 			function loadTexture( path ) {
 
-				var material = new THREE.MeshBitmapUVMappingMaterial( texture_placeholder );
+				var material = new THREE.MeshBitmapMaterial( texture_placeholder );
 
 				var texture = new Image();
 

examples/hci_clickcube.html

@@ -37,11 +37,10 @@
 		<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/materials/LineColorMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.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/MeshFaceMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
@@ -115,33 +114,33 @@
 
 				geometry = new ClickCube( 200, 200, 200, 
 					function ( s, c, o, f, p ) {
-						f.color.setRGBA( Math.random() * 0.5, Math.random() * 0.5, Math.random() * 0.5, opacity );
+						f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
 						document.getElementById( "msg" ).innerHTML = "Click detected at " + p; 
 					});
 
 				for (var i = 0; i < geometry.faces.length; i++) {
-					geometry.faces[i].color.setRGBA( Math.random() * 0.5, Math.random() * 0.5, Math.random() * 0.5, opacity );
+					geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
 				}
 
-				cube = new THREE.Mesh( geometry, new THREE.MeshFaceColorFillMaterial() );
+				cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
 				cube.position.y = 150;
 				scene.addObject(cube);
 
 				geometry2 = new ClickCube( 100, 100, 100, 
 						function ( s, c, o, f, p ) {
-							f.color.setRGBA( Math.random() * 0.5, Math.random() * 0.5, Math.random() * 0.5, opacity );
+							f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
 							document.getElementById( "msg" ).innerHTML = "Click detected at " + p; 
 						});
 
 				for (var i = 0; i < geometry2.faces.length; i++) {
-					geometry2.faces[i].color.setRGBA( Math.random() * 0.5, Math.random() * 0.5, Math.random() * 0.5, opacity );
+					geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
 				}
-				
-				cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceColorFillMaterial() );
+
+				cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceMaterial() );
 				cube2.position.y = 150;
 				cube2.position.z = 200;
 				scene.addObject(cube2);
-				
+
 				// Plane
 				renderer = new THREE.CanvasRenderer();
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

examples/lights_test.html

@@ -65,11 +65,10 @@
 		<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/MeshBitmapMaterial.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/MeshFaceMaterial.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>

examples/materials_test.html

@@ -68,11 +68,10 @@
 		<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/MeshBitmapMaterial.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/MeshFaceMaterial.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>
@@ -257,11 +256,11 @@
                         xc2.fillRect(i*4, 5, 2, 54);
                     }
 
-                    var xm1 = new THREE.MeshBitmapUVMappingMaterial( x1 );
+                    var xm1 = new THREE.MeshBitmapMaterial( x1 );
                     xm1.loaded = 1;
                     xm1.decalIndex = 0; // index of the original UV mapped material 
 
-                    var xm2 = new THREE.MeshBitmapUVMappingMaterial( x2 );
+                    var xm2 = new THREE.MeshBitmapMaterial( x2 );
                     xm2.loaded = 1;
                     xm2.decalIndex = 1; // index of the original UV mapped material 
                     
@@ -320,7 +319,7 @@
                     xc.font = "50pt arial bold";
                     xc.fillText(i, 10, 64);
                     
-                    var xm = new THREE.MeshBitmapUVMappingMaterial( x );
+                    var xm = new THREE.MeshBitmapMaterial( x );
                     xm.loaded = 1;
                     
                     mesh = new THREE.Mesh( new Plane( size, size ), xm );

examples/materials_video.html

@@ -83,7 +83,7 @@
 				textureContext.fillStyle = '#000000';
 				textureContext.fillRect( 0, 0, 480, 204 );
 
-				var material = new THREE.MeshBitmapUVMappingMaterial( texture );
+				var material = new THREE.MeshBitmapMaterial( texture );
 
 				textureReflection = document.createElement( 'canvas' );
 				textureReflection.width = 480;
@@ -97,7 +97,7 @@
 				textureReflectionGradient.addColorStop( 0.2, 'rgba(240, 240, 240, 1)' );
 				textureReflectionGradient.addColorStop( 1, 'rgba(240, 240, 240, 0.8)' );
 
-				var materialReflection = new THREE.MeshBitmapUVMappingMaterial( textureReflection );
+				var materialReflection = new THREE.MeshBitmapMaterial( textureReflection );
 
 				//
 

examples/obj_convert_test.html

@@ -160,7 +160,7 @@
                 xc.fillStyle = "#555";
                 xc.fillRect(96, 96, 32, 32);
                 
-                var xm = new THREE.MeshBitmapUVMappingMaterial( x );
+                var xm = new THREE.MeshBitmapMaterial( x );
                 xm.loaded = 1;
                 
                 geometry = new Plane( 100, 100, 15, 10 );

examples/test.html

@@ -33,15 +33,14 @@
 		<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/objects/Mesh.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/MeshBitmapMaterial.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/MeshFaceMaterial.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>
@@ -104,7 +103,7 @@
 
 				// QRCODE
 
-				qrcode = mesh = new THREE.Mesh(new Qrcode(), new THREE.MeshFaceColorFillMaterial());
+				qrcode = mesh = new THREE.Mesh( new Qrcode(), new THREE.MeshFaceMaterial() );
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 				mesh.updateMatrix();
 				scene.add(mesh);
@@ -155,22 +154,22 @@
 
 					var v = new THREE.Vector3( Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500 );
 
-					var v0 = new THREE.Vertex( new THREE.Vector3(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
-					var v1 = new THREE.Vertex( new THREE.Vector3(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
-					var v2 = new THREE.Vertex( new THREE.Vector3(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
+					var v0 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
+					var v1 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
+					var v2 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
 
 					v0.position.addSelf( v );
 					v1.position.addSelf( v );
 					v2.position.addSelf( v );
 
-					var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1 );
-					face.color.setRGBA( Math.random(), Math.random(), Math.random(), 1 );
+					var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1, null, new THREE.MeshColorFillMaterial( Math.random() * 0xffffff ) );
+
 					geometry.faces.push( face );
 				}
 
 				geometry.computeNormals();
 
-				mesh = new THREE.Mesh( geometry, new THREE.MeshFaceColorFillMaterial() );
+				mesh = new THREE.Mesh( geometry, [ new THREE.MeshFaceMaterial(), new THREE.MeshColorStrokeMaterial( 0xff0000, 0.5, 10 ) ] );
 				mesh.doubleSided = true;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 				scene.add(mesh);
@@ -239,7 +238,7 @@
 
 				canvasRenderer.render( scene, camera );
 				svgRenderer.render( scene, camera );
-				webglRenderer.render( scene, camera );
+				// webglRenderer.render( scene, camera ); // currently broken :/
 
 				stats.update();
 

src/core/Face3.js

@@ -2,32 +2,21 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-THREE.Face3 = function ( a, b, c, normal, color, material ) {
+THREE.Face3 = function ( a, b, c, normal, material ) {
 
 	this.a = a;
 	this.b = b;
 	this.c = c;
 
 	this.centroid = new THREE.Vector3();
-    this.normal = normal instanceof THREE.Vector3 ? 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;
+	this.material = material instanceof Array ? material : [ material ];
 
 };
 
 THREE.Face3.prototype = {
 
-	// TODO: Dupe? (Geometry/computeCentroid)
-
-	getCenter : function(){
-
-		return this.a.clone().addSelf( this.b ).addSelf( this.c ).divideScalar( 3 );
-
-	},
-
 	toString: function () {
 
 		return 'THREE.Face3 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';

src/core/Face4.js

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

src/core/Geometry.js

@@ -58,86 +58,97 @@ THREE.Geometry.prototype = {
 
 			face = this.faces[ f ];
 
-            if ( useVertexNormals && face.vertexNormals.length  ) {
-                
-                // set face normal to average of vertex normals
-                
-                cb.set( 0, 0, 0 );
+			if ( useVertexNormals && face.vertexNormals.length  ) {
 
-                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;
-                }
+				cb.set( 0, 0, 0 );
 
-                cb.x /= 3;
-                cb.y /= 3;
-                cb.z /= 3;
+				for ( n = 0, nl = face.normal.length; n < nl; n++ ) {
 
-                if ( !cb.isZero() ) {
+					cd.addSelf( face.vertexNormals[n] );
 
-                    cb.normalize();
+				}
 
-                }
+				cb.divideScalar( 3 );
 
-                face.normal.copy( cb );
-            }
-            
-            else {
-                
-                vA = this.vertices[ face.a ];
-                vB = this.vertices[ face.b ];
-                vC = this.vertices[ face.c ];
+				if ( ! cb.isZero() ) {
 
-                cb.sub( vC.position, vB.position );
-                ab.sub( vA.position, vB.position );
-                cb.crossSelf( ab );
+					cb.normalize();
 
-                if ( !cb.isZero() ) {
+				}
 
-                    cb.normalize();
+				face.normal.copy( cb );
 
-                }
+			} else {
 
-                face.normal.copy( cb );
-            }
+				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 );
+
+			}
+
+		}
+
+	},
+
+	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 ] };
+
+			for ( var 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;
+
+				}
+
+			}
 
 		}
 
 	},
-    
-    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/MeshBitmapUVMappingMaterial.js → src/materials/MeshBitmapMaterial.js

@@ -2,17 +2,17 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-THREE.MeshBitmapUVMappingMaterial = function ( bitmap ) {
+THREE.MeshBitmapMaterial = function ( bitmap, mode ) {
 
 	this.bitmap = bitmap;
+	this.mode = mode || THREE.MeshBitmapMaterialMode.UVMAPPING;
 
-    this.loaded = 0;
-    this.decalIndex = -1;
-    
 	this.toString = function () {
 
-		return 'THREE.MeshBitmapUVMappingMaterial ( bitmap: ' + this.bitmap + ' )';
+		return 'THREE.MeshBitmapUVMappingMaterial ( bitmap: ' + this.bitmap + ', mode: ' + this.mode + ' )';
 
 	};
 
 };
+
+THREE.MeshBitmapMaterialMode = { UVMAPPING: 0 };

src/materials/MeshFaceColorStrokeMaterial.js

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

src/materials/MeshFaceColorFillMaterial.js → src/materials/MeshFaceMaterial.js

@@ -2,11 +2,11 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-THREE.MeshFaceColorFillMaterial = function () {
+THREE.MeshFaceMaterial = function () {
 
 	this.toString = function () {
 
-		return 'THREE.MeshFaceColorFillMaterial ( )';
+		return 'THREE.MeshFaceMaterial';
 
 	};
 

src/renderers/Projector.js

@@ -96,9 +96,8 @@ THREE.Projector = function() {
 
 								_face3.z = Math.max( v1.positionScreen.z, Math.max( v2.positionScreen.z, v3.positionScreen.z ) );
 
-								//_face3.material = [ object.material[face.material] ];
-                                _face3.material = object.material;
-                                _face3.materialIndex = face.material;
+								_face3.meshMaterial = object.material;
+								_face3.faceMaterial = face.material;
 								_face3.overdraw = object.overdraw;
 								_face3.uvs = object.geometry.uvs[ f ];
 								_face3.color = face.color;
@@ -137,9 +136,8 @@ 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[face.material] ];
-                                _face4.material = object.material;
-                                _face4.materialIndex = face.material;
+								_face4.meshMaterial = object.material;
+								_face4.faceMaterial = face.material;
 								_face4.overdraw = object.overdraw;
 								_face4.uvs = object.geometry.uvs[ f ];
 								_face4.color = face.color;

src/renderers/SVGRenderer.js

@@ -19,6 +19,7 @@ THREE.SVGRenderer = function () {
 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 
 	_svgPathPool = [], _svgCirclePool = [],
+	_svgNode, _pathCount, _circleCount,
 	_quality = 1;
 
 	this.domElement = _svg;
@@ -60,8 +61,7 @@ THREE.SVGRenderer = function () {
 
 	this.render = function ( scene, camera ) {
 
-		var e, el, m, ml, element, material,
-		pathCount = 0, circleCount = 0, svgNode,
+		var e, el, m, ml, fm, fml, element, material,
 		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y,
 		size;
 
@@ -73,6 +73,8 @@ THREE.SVGRenderer = function () {
 
 		_renderList = _projector.projectScene( scene, camera );
 
+		_pathCount = 0; _circleCount = 0;
+
 		_enableLighting = scene.lights.length > 0;
 
 		if ( _enableLighting ) {
@@ -85,155 +87,110 @@ THREE.SVGRenderer = function () {
 
 			element = _renderList[ e ];
 
-			for ( m = 0, ml = element.material.length; m < ml; m++ ) {
-
-				material = element.material[ m ];
-
-				_bboxRect.empty();
-
-				if ( element instanceof THREE.RenderableParticle ) {
+			_bboxRect.empty();
 
-					v1x = element.x * _widthHalf; v1y = element.y * -_heightHalf;
-					size = element.size  * _widthHalf;
+			if ( element instanceof THREE.RenderableParticle ) {
 
-					_bboxRect.set( v1x - size, v1y - size, v1x + size, v1y + size );
+				v1x = element.x * _widthHalf; v1y = element.y * -_heightHalf;
 
-					if ( !_clipRect.instersects( _bboxRect ) ) {
-
-						continue;
-
-					}
+				for ( m = 0, ml = element.material.length; m < ml; m++ ) {
 
-					svgNode = getCircleNode( circleCount++ );
-					svgNode.setAttribute( 'cx', v1x );
-					svgNode.setAttribute( 'cy', v1y );
-					svgNode.setAttribute( 'r', size );
+					material = element.material[ m ];
 
-				} else if ( element instanceof THREE.RenderableFace3 ) {
-
-					v1x = element.v1.x * _widthHalf; v1y = element.v1.y * -_heightHalf;
-					v2x = element.v2.x * _widthHalf; v2y = element.v2.y * -_heightHalf;
-					v3x = element.v3.x * _widthHalf; v3y = element.v3.y * -_heightHalf;
-
-					_bboxRect.addPoint( v1x, v1y );
-					_bboxRect.addPoint( v2x, v2y );
-					_bboxRect.addPoint( v3x, v3y );
-
-					if ( !_clipRect.instersects( _bboxRect ) ) {
-
-						continue;
-
-					}
+					renderParticle( v1x, v1y, element, material, scene );
 
-					svgNode = getPathNode( pathCount++ );
-					svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + 'z' );
+				}
 
-				} else if ( element instanceof THREE.RenderableFace4 ) {
+			} else if ( element instanceof THREE.RenderableLine ) {
 
-					v1x = element.v1.x * _widthHalf; v1y = element.v1.y * -_heightHalf;
-					v2x = element.v2.x * _widthHalf; v2y = element.v2.y * -_heightHalf;
-					v3x = element.v3.x * _widthHalf; v3y = element.v3.y * -_heightHalf;
-					v4x = element.v4.x * _widthHalf; v4y = element.v4.y * -_heightHalf;
+				
 
-					_bboxRect.addPoint( v1x, v1y );
-					_bboxRect.addPoint( v2x, v2y );
-					_bboxRect.addPoint( v3x, v3y );
-					_bboxRect.addPoint( v4x, v4y );
+			} else if ( element instanceof THREE.RenderableFace3 ) {
 
-					if ( !_clipRect.instersects( _bboxRect) ) {
+				v1x = element.v1.x * _widthHalf; v1y = element.v1.y * -_heightHalf;
+				v2x = element.v2.x * _widthHalf; v2y = element.v2.y * -_heightHalf;
+				v3x = element.v3.x * _widthHalf; v3y = element.v3.y * -_heightHalf;
 
-						continue;
+				_bboxRect.addPoint( v1x, v1y );
+				_bboxRect.addPoint( v2x, v2y );
+				_bboxRect.addPoint( v3x, v3y );
 
-					}
+				if ( !_clipRect.instersects( _bboxRect ) ) {
 
-					svgNode = getPathNode( pathCount++ );
-					svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + ' L ' + v4x + ',' + v4y + 'z' );
+					continue;
 
 				}
 
+				m = 0; ml = element.meshMaterial.length;
 
-				// TODO: Move out of materials loop
-
-				if ( material instanceof THREE.MeshColorFillMaterial ) {
+				while ( m < ml ) {
 
-					if ( _enableLighting ) {
+					material = element.meshMaterial[ m ++ ];
 
-						_light.copyRGB( _ambientLight );
-						calculateFaceLight( scene, element, _light );
+					if ( material instanceof THREE.MeshFaceMaterial ) {
 
-						_color.copyRGBA( material.color );
-						_color.multiplySelfRGB( _light );
-						_color.updateStyleString();
+						fm = 0; fml = element.faceMaterial.length;
 
-					} else {
-
-							_color = material.color;
-
-					}
+						while ( fm < fml ) {
 
-					svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
+							material = element.faceMaterial[ fm ++ ];
 
-				} else if ( material instanceof THREE.MeshFaceColorFillMaterial ) {
+							renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
 
-					if ( _enableLighting ) {
+						}
 
-						_light.copyRGB( _ambientLight );
-						calculateFaceLight( scene, element, _light );
+						continue;
 
-						_color.copyRGBA( element.color );
-						_color.multiplySelfRGB( _light );
-						_color.updateStyleString();
+					}
 
-					} else {
+					renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
 
-							_color = element.color;
+				}
 
-					}
+			} else if ( element instanceof THREE.RenderableFace4 ) {
 
-					svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
+				v1x = element.v1.x * _widthHalf; v1y = element.v1.y * -_heightHalf;
+				v2x = element.v2.x * _widthHalf; v2y = element.v2.y * -_heightHalf;
+				v3x = element.v3.x * _widthHalf; v3y = element.v3.y * -_heightHalf;
+				v4x = element.v4.x * _widthHalf; v4y = element.v4.y * -_heightHalf;
 
-				} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
+				_bboxRect.addPoint( v1x, v1y );
+				_bboxRect.addPoint( v2x, v2y );
+				_bboxRect.addPoint( v3x, v3y );
+				_bboxRect.addPoint( v4x, v4y );
 
-					if ( _enableLighting ) {
+				if ( !_clipRect.instersects( _bboxRect) ) {
 
-						_light.copyRGB( _ambientLight );
-						calculateFaceLight( scene, element, _light );
+					continue;
 
-						_color.copyRGBA( material.color );
-						_color.multiplySelfRGB( _light );
-						_color.updateStyleString();
+				}
 
-					} else {
+				m = 0; ml = element.meshMaterial.length;
 
-							_color = material.color;
+				while ( m < ml ) {
 
-					}
+					material = element.meshMaterial[ m ++ ];
 
-					svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
+					if ( material instanceof THREE.MeshFaceMaterial ) {
 
-				} else if ( material instanceof THREE.MeshFaceColorStrokeMaterial ) {
+						fm = 0; fml = element.faceMaterial.length;
 
-					if ( _enableLighting ) {
+						while ( fm < fml ) {
 
-						_light.copyRGB( _ambientLight );
-						calculateFaceLight( scene, element, _light );
+							material = element.faceMaterial[ fm ++ ];
 
-						_color.copyRGBA( element.color );
-						_color.multiplySelfRGB( _light );
-						_color.updateStyleString();
+							renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene );
 
-					} else {
+						}
 
-						_color = element.color;
+						continue;
 
 					}
 
-					svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
+					renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene );
 
 				}
 
-				_svg.appendChild( svgNode );
-
 			}
 
 		}
@@ -262,6 +219,32 @@ THREE.SVGRenderer = function () {
 
 	}
 
+	function calculateLight( scene, element, color ) {
+
+		var l, ll, light;
+
+		for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
+
+			light = scene.lights[ l ];
+
+			if ( light instanceof THREE.DirectionalLight ) {
+
+				color.r += light.color.r;
+				color.g += light.color.g;
+				color.b += light.color.b;
+
+			} else if ( light instanceof THREE.PointLight ) {
+
+				color.r += light.color.r;
+				color.g += light.color.g;
+				color.b += light.color.b;
+
+			}
+
+		}
+
+	}
+
 	function calculateFaceLight( scene, element, color ) {
 
 		var l, ll, light, amount;
@@ -303,7 +286,143 @@ THREE.SVGRenderer = function () {
 
 	}
 
-	function getPathNode( id ) {
+	function renderParticle ( v1x, v1y, element, material, scene ) {
+
+		_svgNode = getCircleNode( _circleCount++ );
+		_svgNode.setAttribute( 'cx', v1x );
+		_svgNode.setAttribute( 'cy', v1y );
+		_svgNode.setAttribute( 'r', element.scale.x * _widthHalf );
+
+		if ( material instanceof THREE.ParticleCircleMaterial ) {
+
+			if ( _enableLighting ) {
+
+				_light.copyRGB( _ambientLight );
+				calculateLight( scene, element, _light );
+
+				_color.copyRGBA( material.color );
+				_color.multiplySelfRGB( _light );
+				_color.updateStyleString();
+
+			} else {
+
+				_color = material.color;
+
+			}
+
+			_svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
+
+		}
+
+		_svg.appendChild( _svgNode );
+
+	}
+	
+	function renderLine ( ) {
+	
+		
+	
+	}
+	
+	function renderFace3 ( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene ) {
+
+		_svgNode = getPathNode( _pathCount ++ );
+		_svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + 'z' );
+
+		if ( material instanceof THREE.MeshColorFillMaterial ) {
+
+			if ( _enableLighting ) {
+
+				_light.copyRGB( _ambientLight );
+				calculateFaceLight( scene, element, _light );
+
+				_color.copyRGBA( material.color );
+				_color.multiplySelfRGB( _light );
+				_color.updateStyleString();
+
+			} else {
+
+				_color = material.color;
+
+			}
+
+			_svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
+
+		} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
+
+			if ( _enableLighting ) {
+
+				_light.copyRGB( _ambientLight );
+				calculateFaceLight( scene, element, _light );
+
+				_color.copyRGBA( material.color );
+				_color.multiplySelfRGB( _light );
+				_color.updateStyleString();
+
+			} else {
+
+				_color = material.color;
+
+			}
+
+			_svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
+
+		}
+
+		_svg.appendChild( _svgNode );
+
+	}
+
+	function renderFace4 ( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene ) {
+
+		_svgNode = getPathNode( _pathCount ++ );
+		_svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + ' L ' + v4x + ',' + v4y + 'z' );
+
+		if ( material instanceof THREE.MeshColorFillMaterial ) {
+
+			if ( _enableLighting ) {
+
+				_light.copyRGB( _ambientLight );
+				calculateFaceLight( scene, element, _light );
+
+				_color.copyRGBA( material.color );
+				_color.multiplySelfRGB( _light );
+				_color.updateStyleString();
+
+			} else {
+
+				_color = material.color;
+
+			}
+
+			_svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
+
+		} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
+
+			if ( _enableLighting ) {
+
+				_light.copyRGB( _ambientLight );
+				calculateFaceLight( scene, element, _light );
+
+				_color.copyRGBA( material.color );
+				_color.multiplySelfRGB( _light );
+				_color.updateStyleString();
+
+			} else {
+
+				_color = material.color;
+
+			}
+
+			_svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
+
+		}
+
+		_svg.appendChild( _svgNode );
+
+	}
+
+	function getPathNode ( id ) {
 
 		if ( _svgPathPool[ id ] == null ) {
 
@@ -323,7 +442,7 @@ THREE.SVGRenderer = function () {
 
 	}
 
-	function getCircleNode( id ) {
+	function getCircleNode ( id ) {
 
 		if ( _svgCirclePool[id] == null ) {
 

utils/Builder.py

@@ -28,11 +28,10 @@ files.append('objects/Particle.js')
 files.append('objects/Line.js')
 files.append('objects/Mesh.js')
 files.append('materials/LineColorMaterial.js')
-files.append('materials/MeshBitmapUVMappingMaterial.js')
+files.append('materials/MeshBitmapMaterial.js')
 files.append('materials/MeshColorFillMaterial.js')
 files.append('materials/MeshColorStrokeMaterial.js')
-files.append('materials/MeshFaceColorFillMaterial.js')
-files.append('materials/MeshFaceColorStrokeMaterial.js')
+files.append('materials/MeshFaceMaterial.js')
 files.append('materials/ParticleBitmapMaterial.js')
 files.append('materials/ParticleCircleMaterial.js')
 files.append('materials/ParticleDOMMaterial.js')

utils/BuilderCanvas.py

@@ -28,11 +28,10 @@ files.append('objects/Particle.js')
 files.append('objects/Line.js')
 files.append('objects/Mesh.js')
 files.append('materials/LineColorMaterial.js')
-files.append('materials/MeshBitmapUVMappingMaterial.js')
+files.append('materials/MeshBitmapMaterial.js')
 files.append('materials/MeshColorFillMaterial.js')
 files.append('materials/MeshColorStrokeMaterial.js')
-files.append('materials/MeshFaceColorFillMaterial.js')
-files.append('materials/MeshFaceColorStrokeMaterial.js')
+files.append('materials/MeshFaceMaterial.js')
 files.append('materials/ParticleBitmapMaterial.js')
 files.append('materials/ParticleCircleMaterial.js')
 files.append('scenes/Scene.js')

utils/BuilderDebug.py

@@ -28,11 +28,10 @@ files.append('objects/Particle.js')
 files.append('objects/Line.js')
 files.append('objects/Mesh.js')
 files.append('materials/LineColorMaterial.js')
-files.append('materials/MeshBitmapUVMappingMaterial.js')
+files.append('materials/MeshBitmapMaterial.js')
 files.append('materials/MeshColorFillMaterial.js')
 files.append('materials/MeshColorStrokeMaterial.js')
-files.append('materials/MeshFaceColorFillMaterial.js')
-files.append('materials/MeshFaceColorStrokeMaterial.js')
+files.append('materials/MeshFaceMaterial.js')
 files.append('materials/ParticleBitmapMaterial.js')
 files.append('materials/ParticleCircleMaterial.js')
 files.append('materials/ParticleDOMMaterial.js')

utils/BuilderSVG.py

@@ -27,11 +27,11 @@ files.append('objects/Object3D.js')
 files.append('objects/Particle.js')
 files.append('objects/Line.js')
 files.append('objects/Mesh.js')
-files.append('materials/MeshBitmapUVMappingMaterial.js')
+files.append('materials/LineColorMaterial.js')
+files.append('materials/MeshBitmapMaterial.js')
 files.append('materials/MeshColorFillMaterial.js')
 files.append('materials/MeshColorStrokeMaterial.js')
-files.append('materials/MeshFaceColorFillMaterial.js')
-files.append('materials/MeshFaceColorStrokeMaterial.js')
+files.append('materials/MeshFaceMaterial.js')
 files.append('materials/ParticleBitmapMaterial.js')
 files.append('materials/ParticleCircleMaterial.js')
 files.append('scenes/Scene.js')

utils/BuilderWebGL.py

@@ -28,11 +28,10 @@ files.append('objects/Particle.js')
 files.append('objects/Line.js')
 files.append('objects/Mesh.js')
 files.append('materials/LineColorMaterial.js')
-files.append('materials/MeshBitmapUVMappingMaterial.js')
+files.append('materials/MeshBitmapMaterial.js')
 files.append('materials/MeshColorFillMaterial.js')
 files.append('materials/MeshColorStrokeMaterial.js')
-files.append('materials/MeshFaceColorFillMaterial.js')
-files.append('materials/MeshFaceColorStrokeMaterial.js')
+files.append('materials/MeshFaceMaterial.js')
 files.append('materials/ParticleBitmapMaterial.js')
 files.append('materials/ParticleCircleMaterial.js')
 files.append('scenes/Scene.js')