Link mtl setter

README.md

@@ -12,6 +12,7 @@ ObJS
 * Object rotation with the mouse.
 * Zoom control with the mousewheel.
 * Choose to draw (or not) vertizes, edges or faces.
+* Use mtl files for material color.
 * Change colors of background, vertizes, edges, and faces during runtime.
 * Change face transparency during runtime, so hidden elements are visible.
 * Change zoom and rotation speed during runtime.
@@ -90,6 +91,15 @@ myObJS.colorElement(keyword, color);
 	- *'faces'*, for the faces.
 * *color* is a character string with the HEX codeo for the desired color, for example *'#ff0000'* for red.
 
+##### Use materials #####
+
+If a .mtl file is present in the same directory as the obj file, you can use the materials there to colorize the model (enabled by default). 
+```javascript
+myObJS.linkMaterial(true); //Use .mtl file
+myObJS.linkMaterial(false); //Don't use .mtl file
+```
+Note that, when using .mtl files, faces with no material assigned will use the color defined by the user.
+
 ##### Select face transparency #####
 ```javascript
 myObJS.setAlpha(percent);

index.html

@@ -32,7 +32,7 @@
 					<br/>
 					<pre><input type="checkbox" name="drawElement" value="edges" checked onChange="objs.drawElement('edges', this.checked);"/>Edges		<input type="color" id="colorEdges" value="#644646" onChange="objs.colorElement('edges', this.value);"/></pre>
 					<br/>
-					<pre><input type="checkbox" name="drawElement" value="faces" checked onChange="objs.drawElement('faces', this.checked);"/>Faces		<input type="color" id="colorFaces" value="#B4B4FF" onChange="objs.colorElement('faces', this.value);"/></pre>
+					<pre><input type="checkbox" name="drawElement" value="faces" checked onChange="objs.drawElement('faces', this.checked);"/>Faces		<input type="color" id="colorFaces" value="#B4B4FF" onChange="objs.colorElement('faces', this.value);"/><input type="checkbox" checked onChange="objs.linkMaterial(this.checked);"/>Use materials</pre>
 					<pre>		Alpha:<br/>		0% <input type="range" min="0" max="100" step="1" value="60" onInput="objs.setAlpha(this.value);" onChange="objs.setAlpha(this.value);"/>100%</pre>
 					<br/>
 					Rotation speed:<br/>

script/ObJS.js

@@ -51,7 +51,7 @@ function ObJS(file, canv){
 	 * Variables containing the number of elements.                     *
 	 ********************************************************************/ 
 	var totalVert;
-	var totalMaterial;
+	var totalMaterial = 0;
 	var totalFace
 	
 	/********************************************************************
@@ -233,6 +233,18 @@ function ObJS(file, canv){
 		draw();
 	};
 	
+	/********************************************************************
+	 * Function switching the use of mtl file for color.                *
+	 * #parameters:                                                     *
+	 *   value (boolean): indicating if the element is to be drawn.     *
+	 * #return: nothing                                                 *
+	 * #scope: public                                                   *
+	 ********************************************************************/ 
+	this.linkMaterial = function(value){
+		useMtl = value;
+		draw();
+	}
+	
 	/********************************************************************
 	 * Function switching the alpha value of the faces.                 *
 	 * #parameters:                                                     *
@@ -458,6 +470,7 @@ function ObJS(file, canv){
 			}
 			text = text.substring(text.indexOf("\n") + 1);
 		}
+		totalMaterial = material.length;
 	};
 	
 	/********************************************************************
@@ -523,7 +536,7 @@ function ObJS(file, canv){
 		ctx.font = "12px Arial";
 		var h = canvas.height / 2 - 14;
 		var w = 10 - (canvas.height / 2);
-		ctx.fillText("ObJS   " + totalVert + " vertizes   " + totalFace + " faces", w, h);
+		ctx.fillText("ObJS:   " + totalVert + " vertizes   " + totalFace + " faces   " + totalMaterial + " materials", w, h);
 	};
 	
 	/********************************************************************