diff --git a/docs/css3d.ajax.html b/docs/css3d.ajax.html
index 4d9f8fa..21da07e 100644
--- a/docs/css3d.ajax.html
+++ b/docs/css3d.ajax.html
@@ -991,7 +991,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.ajax.js.html b/docs/css3d.ajax.js.html
index 97c829a..8b6b117 100644
--- a/docs/css3d.ajax.js.html
+++ b/docs/css3d.ajax.js.html
@@ -232,7 +232,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.camera.html b/docs/css3d.camera.html
index a207bc2..b8ac1fd 100644
--- a/docs/css3d.camera.html
+++ b/docs/css3d.camera.html
@@ -3170,7 +3170,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.camera.js.html b/docs/css3d.camera.js.html
index 44278f5..38bd80f 100644
--- a/docs/css3d.camera.js.html
+++ b/docs/css3d.camera.js.html
@@ -466,7 +466,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.element.html b/docs/css3d.element.html
index 7874e11..188f64a 100644
--- a/docs/css3d.element.html
+++ b/docs/css3d.element.html
@@ -4959,7 +4959,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:28 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.element.js.html b/docs/css3d.element.js.html
index 07eb17a..5eab312 100644
--- a/docs/css3d.element.js.html
+++ b/docs/css3d.element.js.html
@@ -774,7 +774,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.elementFactory.html b/docs/css3d.elementFactory.html
index 77d10cc..fd8df95 100644
--- a/docs/css3d.elementFactory.html
+++ b/docs/css3d.elementFactory.html
@@ -1100,7 +1100,7 @@ <h5>Returns:</h5>
         
             
 <dt>
-    <h4 class="name" id="fromObj"><span class="type-signature">(static) </span>fromObj<span class="signature">(container, scene, objFile, className, backfaceCulling, shading, clockwise)</span><span class="type-signature"> &rarr; {<a href="css3d.element.html">css3d.element</a>}</span></h4>
+    <h4 class="name" id="fromObj"><span class="type-signature">(static) </span>fromObj<span class="signature">(container, scene, objFile, className, backfaceCulling, shading, clockwise, textureFile, textureSize)</span><span class="type-signature"> &rarr; {<a href="css3d.element.html">css3d.element</a>}</span></h4>
 
     
 </dt>
@@ -1312,6 +1312,52 @@ <h5>Parameters:</h5>
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>textureFile</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">String</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Path to texture file</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>textureSize</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Integer</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Texture size (The texture has to be a square)</td>
+        </tr>
+
+    
     </tbody>
 </table>
     
@@ -1339,7 +1385,7 @@ <h5>Parameters:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="css3d.elementFactory.js.html">css3d.elementFactory.js</a>, <a href="css3d.elementFactory.js.html#line686">line 686</a>
+        <a href="css3d.elementFactory.js.html">css3d.elementFactory.js</a>, <a href="css3d.elementFactory.js.html#line688">line 688</a>
     </li></ul></dd>
     
 
@@ -1955,7 +2001,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:28 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.elementFactory.js.html b/docs/css3d.elementFactory.js.html
index 97fe59a..8db0416 100644
--- a/docs/css3d.elementFactory.js.html
+++ b/docs/css3d.elementFactory.js.html
@@ -708,15 +708,19 @@ <h1 class="page-title">Source: css3d.elementFactory.js</h1>
      * @param {Boolean|null} backfaceCulling
      * @param {Boolean|null} shading
      * @param {Boolean|null} clockwise  The face winding direction
+     * @param {String} textureFile  Path to texture file
+     * @param {Integer} textureSize Texture size (The texture has to be a square)
      * @returns {css3d.element} This is the parent element 
      */
-    fromObj : function(container, scene, objFile, className, backfaceCulling, shading, clockwise)
+    fromObj : function(container, scene, objFile, className, backfaceCulling, shading, clockwise, textureFile, textureSize)
     {
 
         className = className || 'model';
         backfaceCulling = (backfaceCulling == null) ? true : backfaceCulling;
         shading = (shading == null) ? true : shading;
         clockwise = (clockwise == null) ? false : clockwise;
+        textureFile = (textureFile == null) ? '' : textureFile;
+        textureSize = (textureSize == null) ? 1024 : textureSize;        
 
         var objContent = css3d.ajax.getS(objFile);
 
@@ -724,11 +728,16 @@ <h1 class="page-title">Source: css3d.elementFactory.js</h1>
         var faces = [];
         var colors = [];
         colors[0] = [204, 204, 204];
+        var textureCoordinates = [];
+        var faceMatches = [];
 
         var findColors = /c ([0-9]*) ([0-9]*) ([0-9]*)/gim;
         var findVertices = /v ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;
-        var findFaces = /f ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*)(.*)$/gim;
+        //var findFaces1 = /f ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*)(.*)$/gim;
+        var findFaces1 = /f ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)(.*)$/gim;
+        var findFaces2 = /f ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*)(.*)$/gim;        
         var findFaceColor = /[0-9\/.]* ([0-9])$/;
+        var findTextureCoordinates = /vt ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;
 
         var matches = false;
 
@@ -742,20 +751,51 @@ <h1 class="page-title">Source: css3d.elementFactory.js</h1>
             vertices.push([parseFloat(matches[1])*-1, parseFloat(matches[2]), parseFloat(matches[3])]);
         }
         
+        while (matches = findTextureCoordinates.exec(objContent)) {
+            textureCoordinates.push([parseFloat(matches[1]), parseFloat(matches[2]), parseFloat(matches[3])]);
+        }
+ 
         var elementGroup = new css3d.element();
 
         var count = 0;
+        
+        while (matches = findFaces1.exec(objContent)) {
+            faceMatches.push(matches);
+        }
+        
+        while (matches = findFaces2.exec(objContent)) {
+            faceMatches.push(matches);
+        }
 
-        while (matches = findFaces.exec(objContent)) {
+        var i=0
+        while (matches = faceMatches[i++]) {
             
             if (matches.length &lt; 5) {
                 continue;
             }
-
-            var f0 = Math.abs(parseInt(matches[1]))-1;
-            var f1 = Math.abs(parseInt(matches[2]))-1;
-            var f2 = Math.abs(parseInt(matches[3]))-1;
-            var f3 = Math.abs(parseInt(matches[4]))-1;
+       
+            if (matches.length >= 9) {
+                var f0 = Math.abs(parseInt(matches[1]))-1;
+                var f1 = Math.abs(parseInt(matches[3]))-1;
+                var f2 = Math.abs(parseInt(matches[5]))-1;
+                var f3 = Math.abs(parseInt(matches[7]))-1;
+                
+                var ft0 = Math.abs(parseInt(matches[2]))-1;
+                var ft1 = Math.abs(parseInt(matches[4]))-1;
+                var ft2 = Math.abs(parseInt(matches[6]))-1;
+                var ft3 = Math.abs(parseInt(matches[8]))-1;
+                
+                var vt0 = new css3d.vector3(textureCoordinates[ft0][0], textureCoordinates[ft0][1], textureCoordinates[ft0][2]);
+                var vt1 = new css3d.vector3(textureCoordinates[ft1][0], textureCoordinates[ft1][1], textureCoordinates[ft1][2]);
+                var vt2 = new css3d.vector3(textureCoordinates[ft2][0], textureCoordinates[ft2][1], textureCoordinates[ft2][2]);
+                var vt3 = new css3d.vector3(textureCoordinates[ft3][0], textureCoordinates[ft3][1], textureCoordinates[ft3][2]);
+            }
+            else if (matches.length >= 5) {
+                var f0 = Math.abs(parseInt(matches[1]))-1;
+                var f1 = Math.abs(parseInt(matches[2]))-1;
+                var f2 = Math.abs(parseInt(matches[3]))-1;
+                var f3 = Math.abs(parseInt(matches[4]))-1;
+            }
                   
             var v0 = new css3d.vector3(vertices[f0][0], vertices[f0][1], vertices[f0][2]);
             var v1 = new css3d.vector3(vertices[f1][0], vertices[f1][1], vertices[f1][2]);
@@ -787,8 +827,8 @@ <h1 class="page-title">Source: css3d.elementFactory.js</h1>
             ];
            
             // get dimension
-            var width = Math.sqrt(Math.pow(v2.x - v1.x, 2) + Math.pow(v2.y - v1.y, 2) + Math.pow(v2.z - v1.z, 2)).toFixed(2);            
-            var height = Math.sqrt(Math.pow(v1.x - v0.x, 2) + Math.pow(v1.y - v0.y, 2) + Math.pow(v1.z - v0.z, 2)).toFixed(2);                       
+            var width = Math.sqrt(Math.pow(v2.x - v1.x, 2) + Math.pow(v2.y - v1.y, 2) + Math.pow(v2.z - v1.z, 2)).toFixed(4);            
+            var height = Math.sqrt(Math.pow(v1.x - v0.x, 2) + Math.pow(v1.y - v0.y, 2) + Math.pow(v1.z - v0.z, 2)).toFixed(4);                       
 
             // get position
             var x = ((v0.x + v1.x + v2.x + v3.x) / 4.0);
@@ -802,6 +842,40 @@ <h1 class="page-title">Source: css3d.elementFactory.js</h1>
             div.style.width = width+'px';
             div.style.height = height+'px';
             div.style.backgroundColor = '#ccc';
+            
+            // texture mapping
+            if (matches.length >= 9) {
+                var tx0 = vt0.x * textureSize;
+                var ty0 = textureSize - (vt0.y * textureSize); 
+                var tx1 = vt1.x * textureSize;
+                var ty1 = textureSize - (vt1.y * textureSize); 
+                var tx2 = vt2.x * textureSize;
+                var ty2 = textureSize - (vt2.y * textureSize); 
+                var tx3 = vt3.x * textureSize;
+                var ty3 = textureSize - (vt3.y * textureSize);
+       
+                var vWidth = tx3 - tx1;
+                if (vWidth &lt; 0) {
+                    vWidth = tx1 - tx3;
+                    tx1 = tx2;
+                }                
+                var vHeight = ty3 - ty1;
+                if (vHeight &lt; 0) {
+                    vHeight = ty1 - ty3;
+                    ty1 = ty2;
+                }
+                
+                var scaleX = width/vWidth;
+                var scaleY = height/vHeight;
+                
+                // TODO:
+                // there is a problem with texture rotation
+                // some elements are 90 or 180 degrees rotated
+                div.style.backgroundPosition = (-tx1*scaleX).toFixed(4)+'px '+(-ty1*scaleY).toFixed(4)+'px';
+                div.style.backgroundImage = 'url("'+textureFile+'")';
+                div.style.backgroundSize = (textureSize*scaleX).toFixed(4)+'px '+(textureSize*scaleY).toFixed(4)+'px';
+            }            
+            
             container.appendChild(div);
             
             var element = new css3d.element(div);
@@ -809,14 +883,13 @@ <h1 class="page-title">Source: css3d.elementFactory.js</h1>
             element.shading = shading;
             element.setTranslation(x, y, z);
             element.setRotationMatrix(rotationMatrix);
-            //element.setScale(1, -1, 1);
             element.inheritScaling = true;            
             element.setParent(elementGroup);
             scene.addElement(element);
 
             count++;
-        }
-        
+        }        
+       
         console.log('obj file loaded. ' + count + ' faces');
         
         elementGroup.setScale(-1, -1, 1);        
@@ -847,7 +920,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.html b/docs/css3d.html
index e13d6cb..5a9257f 100644
--- a/docs/css3d.html
+++ b/docs/css3d.html
@@ -1171,7 +1171,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.js.html b/docs/css3d.js.html
index aa482f7..209af98 100644
--- a/docs/css3d.js.html
+++ b/docs/css3d.js.html
@@ -452,7 +452,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.math.html b/docs/css3d.math.html
index 2a667db..26349a6 100644
--- a/docs/css3d.math.html
+++ b/docs/css3d.math.html
@@ -617,7 +617,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:28 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.math.interpolation.html b/docs/css3d.math.interpolation.html
index c049e11..83c19f2 100644
--- a/docs/css3d.math.interpolation.html
+++ b/docs/css3d.math.interpolation.html
@@ -784,7 +784,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:28 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.math.js.html b/docs/css3d.math.js.html
index bd0e35d..d79b19f 100644
--- a/docs/css3d.math.js.html
+++ b/docs/css3d.math.js.html
@@ -151,7 +151,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.matrix4.html b/docs/css3d.matrix4.html
index ece97c1..00d29a4 100644
--- a/docs/css3d.matrix4.html
+++ b/docs/css3d.matrix4.html
@@ -2868,7 +2868,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:28 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.matrix4.js.html b/docs/css3d.matrix4.js.html
index 0a48c89..2acfd34 100644
--- a/docs/css3d.matrix4.js.html
+++ b/docs/css3d.matrix4.js.html
@@ -382,7 +382,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.quaternion.html b/docs/css3d.quaternion.html
index 8d8cbb7..9fcedaa 100644
--- a/docs/css3d.quaternion.html
+++ b/docs/css3d.quaternion.html
@@ -2070,7 +2070,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:28 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.quaternion.js.html b/docs/css3d.quaternion.js.html
index 56d0be5..0262717 100644
--- a/docs/css3d.quaternion.js.html
+++ b/docs/css3d.quaternion.js.html
@@ -433,7 +433,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.scene.html b/docs/css3d.scene.html
index 72b4620..5fd1efc 100644
--- a/docs/css3d.scene.html
+++ b/docs/css3d.scene.html
@@ -859,7 +859,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:28 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.scene.js.html b/docs/css3d.scene.js.html
index ab2c72b..c283908 100644
--- a/docs/css3d.scene.js.html
+++ b/docs/css3d.scene.js.html
@@ -171,7 +171,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.vector3.html b/docs/css3d.vector3.html
index 602f868..8cb48ad 100644
--- a/docs/css3d.vector3.html
+++ b/docs/css3d.vector3.html
@@ -1936,7 +1936,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:28 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.vector3.js.html b/docs/css3d.vector3.js.html
index 61a84fe..6aa4494 100644
--- a/docs/css3d.vector3.js.html
+++ b/docs/css3d.vector3.js.html
@@ -268,7 +268,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.vector4.html b/docs/css3d.vector4.html
index db150f9..56953e5 100644
--- a/docs/css3d.vector4.html
+++ b/docs/css3d.vector4.html
@@ -1312,7 +1312,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:28 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/css3d.vector4.js.html b/docs/css3d.vector4.js.html
index 2011a56..637b734 100644
--- a/docs/css3d.vector4.js.html
+++ b/docs/css3d.vector4.js.html
@@ -216,7 +216,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/index.html b/docs/index.html
index 0a98a3d..615bdec 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -54,7 +54,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="css3d.ht
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Wed Jul 09 2014 18:47:27 GMT+0200 (Mitteleuropäische Sommerzeit)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a> on Fri Jul 11 2014 01:52:19 GMT+0200 (Mitteleuropäische Sommerzeit)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/examples/example05.html b/examples/example05.html
index 3c488a7..40ed483 100644
--- a/examples/example05.html
+++ b/examples/example05.html
@@ -2,7 +2,7 @@
 <html>
     <head>
     <title></title>
-    <script src="../release/css3d.min.js"></script>
+    <script src="../release/css3d.js"></script>
     
 
     <style>
diff --git a/examples/example08.html b/examples/example08.html
new file mode 100644
index 0000000..61b9fb6
--- /dev/null
+++ b/examples/example08.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <title></title>
+    <script src="../release/css3d.js"></script>
+    
+
+    <style>
+    body {        
+        margin: 0;
+        font-family: sans-serif;
+    }
+    
+    #container {
+        width: 500px;
+        height: 500px;
+        margin: auto auto;
+        margin-top: 300px;
+        position: relative;
+    }    
+    
+    .cube {
+        /*
+        background-image: url('../textures/2x_EscherCubeFish_1024.jpg');
+        background-size: 610px;
+        */
+        /*
+        One cube side is 200px
+        The texture side size is 336px
+        So 200/336*1024 = 610
+        */
+        
+    }
+
+    </style>
+    </head>
+    <body>
+        
+        <div id="container">
+            
+        </div>
+
+        <script>
+ 
+        // init engine and scene
+        var engine = new css3d(document.getElementById('container'));
+        var scene = new css3d.scene();
+        scene.getLight().set(-0.7, -0.7, -1).normalize();
+                
+        // load model
+        var model = css3d.elementFactory.fromObj(
+            document.getElementById('container'),
+            scene, 
+            '../models/cube.obj', 
+            'cube',    // class name
+            true,       // backface culling
+            true,       // shading
+            true,       // clockwise winding,
+            '../textures/2x_EscherCubeFish_1024.jpg',
+            1024
+        );
+                
+        // add scene to engine
+        engine.setScene(scene);
+        
+        if (!engine.browserSupports3d) {
+            alert('This browser does not support CSS 3D');
+        }     
+        
+        var axis = new css3d.vector3(1, 1, 0).normalize();
+        var rotation = 0;   
+        var rotationIncrement = 0.01;
+     
+        engine.onRender = updateScene;
+        engine.startRender();
+
+        //engine.update().render();        
+
+        function updateScene(deltaTime)
+        {          
+           model.setRotation(axis, rotation);           
+           rotation += rotationIncrement;
+
+        }
+
+        </script>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/examples/example09.html b/examples/example09.html
new file mode 100644
index 0000000..0f20eb3
--- /dev/null
+++ b/examples/example09.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <title></title>
+    <script src="../release/css3d.js"></script>
+    
+
+    <style>
+    body {        
+        margin: 0;
+        font-family: sans-serif;
+        overflow: hidden;
+    }
+    
+    #container {
+        width: 500px;
+        height: 500px;
+        margin: auto auto;
+        margin-top: 300px;
+        position: relative;
+    }    
+    
+    .scifi {
+        
+    }
+
+    </style>
+    </head>
+    <body>
+        
+        <div id="container">
+            
+        </div>
+
+        <script>
+ 
+        // init engine and scene
+        var engine = new css3d(document.getElementById('container'));
+        var scene = new css3d.scene();
+        scene.getLight().set(-0.7, -0.7, 0).normalize();
+        scene.getCamera().setTranslation(0, 0, 0);
+                
+        // load model
+        var model = css3d.elementFactory.fromObj(
+            document.getElementById('container'),
+            scene, 
+            '../models/scifi01.obj', 
+            'scifi',    // class name
+            false,       // backface culling
+            true,       // shading
+            true,       // clockwise winding,
+            '../textures/scifi01.jpg',
+            1024
+        );
+                
+        // add scene to engine
+        engine.setScene(scene);
+        
+        if (!engine.browserSupports3d) {
+            alert('This browser does not support CSS 3D');
+        }     
+        
+        var deltaTimeCounter = 0;
+        var engineDeltaTime = 0;
+
+        engine.onRender = updateScene;
+        engine.startRender();
+
+        function updateScene(deltaTime)
+        {         
+            engineDeltaTime = deltaTime;
+            scene.getCamera().getTranslation().y = 0;
+           
+        }
+        
+        /* FPS camera *********************************************************/
+        
+        var cameraRotationX = 0;
+        var cameraRotationY = 0;
+        var cameraRotationAxis = new css3d.vector3(0, -1, 0).normalize();
+
+        /* key events */
+
+        var speed = 10;
+
+        document.onkeydown = function(evt)
+        {
+            evt = (evt) ? evt : ((event) ? event : null);
+            if (evt) {
+                var code = (evt.which) ? evt.which : evt.keyCode;
+
+                //console.log(code);
+
+                // w
+                if (code == 87) {
+                    scene.getCamera().forward(speed * engineDeltaTime);
+                }
+                // s
+                if (code == 83) {
+                    scene.getCamera().forward(-speed * engineDeltaTime);
+                }
+                // d
+                if (code == 68) {
+                    scene.getCamera().left(-speed * engineDeltaTime);
+                }
+                // a
+                if (code == 65) {
+                    scene.getCamera().left(speed * engineDeltaTime);
+                }
+
+                
+                // up
+                if (code == 38) {
+                    scene.getCamera().up(speed * engineDeltaTime);
+                }
+                // down
+                if (code == 40) {
+                    scene.getCamera().up(-speed * engineDeltaTime);
+                }
+                // left
+                if (code == 37) {
+                    cameraRotationY -= (0.2 * engineDeltaTime);
+                    scene.getCamera().setRotation(cameraRotationAxis, cameraRotationY);
+                }
+                // right
+                if (code == 39) {
+                    cameraRotationY += (0.2 * engineDeltaTime);
+                    scene.getCamera().setRotation(cameraRotationAxis, cameraRotationY);
+                }
+                
+            }
+        };
+
+        document.onkeyup = function(evt)
+        {
+            evt = (evt) ? evt : ((event) ? event : null);
+            if (evt) {
+                var code = (evt.which) ? evt.which : evt.keyCode;
+            }
+        };
+
+        /* mouse events */
+
+        var lastXY = null;
+
+        document.onmousedown = function(evt)
+        {
+            lastXY = null;
+            document.addEventListener('mousemove', onMouseMove);
+        };
+
+        document.onmouseup = function(evt)
+        {
+            document.removeEventListener('mousemove', onMouseMove);
+        };
+
+        function onMouseMove(evt)
+        {
+            var x = evt.pageX;
+            var y = evt.pageY;
+            var relX, relY;
+
+            if (null == lastXY) {
+                lastXY = [x, y];
+                return;
+            }
+
+            relX = x - lastXY[0];
+            relY = lastXY[1] - y;
+
+            cameraRotationX += (relY/100 * engineDeltaTime);
+            cameraRotationY += (relX/100 * engineDeltaTime);
+            
+            //scene.getCamera().setRotation({x:0, y:-1, z:0}, cameraRotationY);  
+            scene.getCamera().setRotationXYZ(-cameraRotationX, -cameraRotationY, 0);            
+            //scene.getCamera().setRotation({x:-1, y:0, z:0}, cameraRotationX);  
+            //scene.getCamera().setRotationXYZ(-cameraRotationX, 0, 0);
+            
+            lastXY = [x, y];
+
+        }
+
+        </script>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/models/cube.obj b/models/cube.obj
new file mode 100644
index 0000000..c9a7a19
--- /dev/null
+++ b/models/cube.obj
@@ -0,0 +1,45 @@
+# WaveFront *.obj file
+
+g Cube
+usemtl Mat
+v -100 -100 100
+v -100 100 100
+v 100 -100 100
+v 100 100 100
+v 100 -100 -100
+v 100 100 -100
+v -100 -100 -100
+v -100 100 -100
+
+vt 0.328125 0.34375 0
+vt 0.328125 0.34375 0
+vt 0.328125 0.34375 0
+vt 0.328125 0.671875 0
+vt 0.328125 0.671875 0
+vt 0.328125 0.671875 0
+vt 0.65625 0.34375 0
+vt 0.65625 0.34375 0
+vt 0.65625 0.34375 0
+vt 0.65625 0.671875 0
+vt 0.65625 0.671875 0
+vt 0.65625 0.671875 0
+vt 0.65625 0.015625 0
+vt 0.65625 0.015625 0
+vt 0.984375 0.34375 0
+vt 0.65625 1 0
+vt 0.65625 0.34375 0
+vt 0.984375 0.671875 0
+vt 0.328125 0.015625 0
+vt 0 0.34375 0
+vt 0.984375 0.015625 0
+vt 0.328125 1 0
+vt 0 0.671875 0
+vt 0.984375 0.34375 0
+
+f 1/3 2/6 4/12 3/9
+f 3/8 4/11 6/18 5/15
+f 5/14 6/17 8/24 7/21
+f 7/20 8/23 2/5 1/2
+f 2/4 8/22 6/16 4/10
+f 7/19 1/1 3/7 5/13
+
diff --git a/models/scifi01.obj b/models/scifi01.obj
new file mode 100644
index 0000000..c95271a
--- /dev/null
+++ b/models/scifi01.obj
@@ -0,0 +1,196 @@
+# WaveFront *.obj file (generated by Cinema4D)
+
+g Cube
+usemtl Mat
+v -150 -110 250
+v -150 110 250
+v 150 -110 250
+v 150 110 250
+v 150 -110 -250
+v 150 110 -250
+v -150 -110 -250
+v -150 110 -250
+v 150 -110 -580.25
+v 150 110 -580.25
+v -150 -110 -580.25
+v -150 110 -580.25
+v -672.75 -110 -250
+v -672.75 110 -250
+v -672.75 -110 -580.25
+v -672.75 110 -580.25
+v -1051.75 -110 -250
+v -1051.75 110 -250
+v -1051.75 -110 -580.25
+v -1051.75 110 -580.25
+v -672.75 -110 519.25
+v -672.75 110 519.25
+v -1051.75 -110 519.25
+v -1051.75 110 519.25
+v -672.75 -110 -1217
+v -672.75 110 -1217
+v -1051.75 -110 -1217
+v -1051.75 110 -1217
+v -672.75 -110 -1544
+v -672.75 110 -1544
+v -1051.75 -110 -1544
+v -1051.75 110 -1544
+v 78.5 -110 -1217
+v 78.5 110 -1217
+v 78.5 -110 -1544
+v 78.5 110 -1544
+
+vt 0.598291 0.360694 0
+vt 0.659853 0.621395 0
+vt 0.17609 0.586239 0
+vt 0.659853 0.777035 0
+vt 0.731787 0.360694 0
+vt 0.504212 0.621395 0
+vt 0.331731 0.586239 0
+vt 0.504212 0.777035 0
+vt 0.731787 0.360694 0
+vt 0.504212 0.777035 0
+vt 0.731787 0.227197 0
+vt 0.659853 0.621395 0
+vt 0.17609 0.741879 0
+vt 0.659853 0.777035 0
+vt 0.331731 0.741879 0
+vt 0.598291 0.360694 0
+vt 0.659853 0.777035 0
+vt 0.598291 0.227197 0
+vt 0.504212 0.621395 0
+vt 0.331731 0.741879 0
+vt 0.504212 0.777035 0
+vt 0.17609 0.741879 0
+vt 0.731787 0.227197 0
+vt 0.504212 0.621395 0
+vt 0.17609 0.586239 0
+vt 0.659853 0.621395 0
+vt 0.504212 0.777035 0
+vt 0.504212 0.777035 0
+vt 0.731787 0.360694 0
+vt 0.598291 0.227197 0
+vt 0.659853 0.621395 0
+vt 0.17609 0.741879 0
+vt 0.659853 0.777035 0
+vt 0.331731 0.586239 0
+vt 0.598291 0.360694 0
+vt 0.659853 0.777035 0
+vt 0.598291 0.227197 0
+vt 0.659853 0.621395 0
+vt 0.331731 0.741879 0
+vt 0.504212 0.777035 0
+vt 0.331731 0.586239 0
+vt 0.504212 0.621395 0
+vt 0.731787 0.360694 0
+vt 0.504212 0.777035 0
+vt 0.504212 0.621395 0
+vt 0.731787 0.227197 0
+vt 0.17609 0.741879 0
+vt 0.659853 0.777035 0
+vt 0.17609 0.586239 0
+vt 0.659853 0.621395 0
+vt 0.504212 0.777035 0
+vt 0.731787 0.360694 0
+vt 0.598291 0.227197 0
+vt 0.825868 0.73602 0
+vt 0.17609 0.741879 0
+vt 0.659853 0.777035 0
+vt 0.331731 0.586239 0
+vt 0.670227 0.73602 0
+vt 0.598291 0.360694 0
+vt 0.659853 0.777035 0
+vt 0.731787 0.227197 0
+vt 0.825868 0.580379 0
+vt 0.504212 0.777035 0
+vt 0.331731 0.741879 0
+vt 0.17609 0.586239 0
+vt 0.670227 0.580379 0
+vt 0.598291 0.227197 0
+vt 0.659853 0.621395 0
+vt 0.167665 0.388363 0
+vt 0.331731 0.586239 0
+vt 0.504212 0.621395 0
+vt 0.012024 0.388363 0
+vt 0.504212 0.621395 0
+vt 0.731787 0.227197 0
+vt 0.167665 0.232723 0
+vt 0.17609 0.586239 0
+vt 0.659853 0.621395 0
+vt 0.012024 0.232723 0
+vt 0.731787 0.360694 0
+vt 0.504212 0.777035 0
+vt 0.731787 0.227197 0
+vt 0.504212 0.621395 0
+vt 0.17609 0.741879 0
+vt 0.659853 0.777035 0
+vt 0.17609 0.586239 0
+vt 0.659853 0.621395 0
+vt 0.598291 0.360694 0
+vt 0.659853 0.777035 0
+vt 0.598291 0.227197 0
+vt 0.659853 0.621395 0
+vt 0.504212 0.777035 0
+vt 0.331731 0.741879 0
+vt 0.504212 0.621395 0
+vt 0.331731 0.586239 0
+vt 0.598291 0.360694 0
+vt 0.659853 0.777035 0
+vt 0.731787 0.227197 0
+vt 0.34195 0.40414 0
+vt 0.504212 0.777035 0
+vt 0.331731 0.741879 0
+vt 0.17609 0.586239 0
+vt 0.497895 0.40414 0
+vt 0.598291 0.227197 0
+vt 0.659853 0.621395 0
+vt 0.34195 0.248196 0
+vt 0.504212 0.621395 0
+vt 0.331731 0.586239 0
+vt 0.497895 0.248196 0
+vt 0.731787 0.227197 0
+vt 0.504212 0.621395 0
+vt 0.339366 0.963365 0
+vt 0.17609 0.586239 0
+vt 0.659853 0.621395 0
+vt 0.500479 0.963365 0
+vt 0.598291 0.227197 0
+vt 0.659853 0.621395 0
+vt 0.339366 0.802252 0
+vt 0.504212 0.621395 0
+vt 0.331731 0.586239 0
+vt 0.500479 0.802252 0
+
+f 6/14 4/8 3/6 5/12
+f 12/33 10/27 9/24 11/31
+f 2/4 8/21 7/19 1/2
+f 6/15 8/22 2/3 4/7
+f 3/5 1/1 7/18 5/11
+f 10/26 6/14 5/10 9/24
+f 12/34 8/20 6/13 10/25
+f 19/62 17/54 18/58 20/66
+f 9/23 5/9 7/16 11/30
+f 13/38 7/17 8/21 14/42
+f 15/46 11/29 7/16 13/37
+f 16/50 12/33 11/28 15/45
+f 14/41 8/20 12/32 16/49
+f 23/75 21/69 22/72 24/78
+f 19/61 15/43 13/35 17/53
+f 32/108 30/102 29/98 31/105
+f 18/57 14/39 16/47 20/65
+f 21/68 13/36 14/40 22/71
+f 23/74 17/52 13/35 21/67
+f 24/77 18/56 17/51 23/73
+f 22/70 14/39 18/55 24/76
+f 26/86 16/48 15/44 25/82
+f 28/94 20/64 16/47 26/85
+f 27/90 19/60 20/63 28/93
+f 25/81 15/43 19/59 27/89
+f 36/120 34/114 33/111 35/117
+f 32/107 28/92 26/83 30/101
+f 31/104 27/88 28/91 32/106
+f 29/97 25/79 27/87 31/103
+f 34/113 26/84 25/80 33/110
+f 36/119 30/100 26/83 34/112
+f 35/116 29/96 30/99 36/118
+f 33/109 25/79 29/95 35/115
+
diff --git a/release/css3d.js b/release/css3d.js
index b1632fc..2fda6f4 100644
--- a/release/css3d.js
+++ b/release/css3d.js
@@ -44,21 +44,38 @@ var css3d = (function(document)
         this._renderId = null;
         this._lastCalledTime = 0;
 
+        /**
+         * Current version
+         * @memberof! css3d
+         * @instance
+         */
         this.version = '0.9';
+        
+        /**
+         * Browser supports CSS 3D
+         * @type {Boolean}
+         * @memberof! css3d
+         * @instance
+         */
         this.browserSupports3d = this._init();
+        
+        /**
+         * Set the render callback
+         * @type {Function}
+         * @memberof! css3d
+         * @instance
+         */
         this.onRender = null;        
     };
 
     css3d.prototype._init = function()
     {
-        if (!this._browserSupports3d()) {
-            //throw new Error('no support for 3D transform');
+        if (!this._browserSupports3d()) {            
             return false;
         }
 
         this._prefix = this._getPrefix();
-        if (null == this._prefix) {
-            //throw new Error('error while getting browser prefix');
+        if (null == this._prefix) {            
             return false;
         }
         this._initContainer();
@@ -617,6 +634,12 @@ css3d.camera = (function()
      */
     var camera = function(x, y, z, perspective)
     {
+        /**
+         * Set the perspective value
+         * @type {Integer}
+         * @memberof! css3d.camera
+         * @instance
+         */ 
         this.perspective = perspective || 800;
 
         x = (null != x) ? x : 0;
@@ -1051,12 +1074,39 @@ css3d.element = (function()
         this._isTranslated = false;
         this._isPivotChanged = false;
         
+        /**
+         * Set shading on/off
+         * @type {Boolean}
+         * @memberof! css3d.element
+         * @instance
+         */
         this.shading = true;
         this.backfaceCullingDirty = false;
         this.worldView = null;
         this.normal = new css3d.vector3(0, 0, 1);
+        
+        /**
+         * Indicates if the element inherits the scaling from an parent element.
+         * @type {Boolean}
+         * @memberof! css3d.element
+         * @instance
+         */
         this.inheritScaling = false;
+        
+        /**
+         * Element will get centered in the container element. This makes it easier to position it in 3D space.
+         * @type {Boolean}
+         * @memberof! css3d.element
+         * @instance
+         */
         this.autoCenter = true;
+        
+        /**
+         * Set the custom zIndex. Only used if browser doesn't support preserve-3d (IE10)
+         * @type {Integer}
+         * @memberof! css3d.element
+         * @instance
+         */
         this.zIndex = null;
     };
 
@@ -2395,15 +2445,19 @@ css3d.elementFactory = {
      * @param {Boolean|null} backfaceCulling
      * @param {Boolean|null} shading
      * @param {Boolean|null} clockwise  The face winding direction
+     * @param {String} textureFile  Path to texture file
+     * @param {Integer} textureSize Texture size (The texture has to be a square)
      * @returns {css3d.element} This is the parent element 
      */
-    fromObj : function(container, scene, objFile, className, backfaceCulling, shading, clockwise)
+    fromObj : function(container, scene, objFile, className, backfaceCulling, shading, clockwise, textureFile, textureSize)
     {
 
         className = className || 'model';
         backfaceCulling = (backfaceCulling == null) ? true : backfaceCulling;
         shading = (shading == null) ? true : shading;
         clockwise = (clockwise == null) ? false : clockwise;
+        textureFile = (textureFile == null) ? '' : textureFile;
+        textureSize = (textureSize == null) ? 1024 : textureSize;        
 
         var objContent = css3d.ajax.getS(objFile);
 
@@ -2411,11 +2465,16 @@ css3d.elementFactory = {
         var faces = [];
         var colors = [];
         colors[0] = [204, 204, 204];
+        var textureCoordinates = [];
+        var faceMatches = [];
 
         var findColors = /c ([0-9]*) ([0-9]*) ([0-9]*)/gim;
         var findVertices = /v ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;
-        var findFaces = /f ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*)(.*)$/gim;
+        //var findFaces1 = /f ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*)(.*)$/gim;
+        var findFaces1 = /f ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)(.*)$/gim;
+        var findFaces2 = /f ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*)(.*)$/gim;        
         var findFaceColor = /[0-9\/.]* ([0-9])$/;
+        var findTextureCoordinates = /vt ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;
 
         var matches = false;
 
@@ -2429,20 +2488,51 @@ css3d.elementFactory = {
             vertices.push([parseFloat(matches[1])*-1, parseFloat(matches[2]), parseFloat(matches[3])]);
         }
         
+        while (matches = findTextureCoordinates.exec(objContent)) {
+            textureCoordinates.push([parseFloat(matches[1]), parseFloat(matches[2]), parseFloat(matches[3])]);
+        }
+ 
         var elementGroup = new css3d.element();
 
         var count = 0;
+        
+        while (matches = findFaces1.exec(objContent)) {
+            faceMatches.push(matches);
+        }
+        
+        while (matches = findFaces2.exec(objContent)) {
+            faceMatches.push(matches);
+        }
 
-        while (matches = findFaces.exec(objContent)) {
+        var i=0
+        while (matches = faceMatches[i++]) {
             
             if (matches.length < 5) {
                 continue;
             }
-
-            var f0 = Math.abs(parseInt(matches[1]))-1;
-            var f1 = Math.abs(parseInt(matches[2]))-1;
-            var f2 = Math.abs(parseInt(matches[3]))-1;
-            var f3 = Math.abs(parseInt(matches[4]))-1;
+       
+            if (matches.length >= 9) {
+                var f0 = Math.abs(parseInt(matches[1]))-1;
+                var f1 = Math.abs(parseInt(matches[3]))-1;
+                var f2 = Math.abs(parseInt(matches[5]))-1;
+                var f3 = Math.abs(parseInt(matches[7]))-1;
+                
+                var ft0 = Math.abs(parseInt(matches[2]))-1;
+                var ft1 = Math.abs(parseInt(matches[4]))-1;
+                var ft2 = Math.abs(parseInt(matches[6]))-1;
+                var ft3 = Math.abs(parseInt(matches[8]))-1;
+                
+                var vt0 = new css3d.vector3(textureCoordinates[ft0][0], textureCoordinates[ft0][1], textureCoordinates[ft0][2]);
+                var vt1 = new css3d.vector3(textureCoordinates[ft1][0], textureCoordinates[ft1][1], textureCoordinates[ft1][2]);
+                var vt2 = new css3d.vector3(textureCoordinates[ft2][0], textureCoordinates[ft2][1], textureCoordinates[ft2][2]);
+                var vt3 = new css3d.vector3(textureCoordinates[ft3][0], textureCoordinates[ft3][1], textureCoordinates[ft3][2]);
+            }
+            else if (matches.length >= 5) {
+                var f0 = Math.abs(parseInt(matches[1]))-1;
+                var f1 = Math.abs(parseInt(matches[2]))-1;
+                var f2 = Math.abs(parseInt(matches[3]))-1;
+                var f3 = Math.abs(parseInt(matches[4]))-1;
+            }
                   
             var v0 = new css3d.vector3(vertices[f0][0], vertices[f0][1], vertices[f0][2]);
             var v1 = new css3d.vector3(vertices[f1][0], vertices[f1][1], vertices[f1][2]);
@@ -2474,8 +2564,8 @@ css3d.elementFactory = {
             ];
            
             // get dimension
-            var width = Math.sqrt(Math.pow(v2.x - v1.x, 2) + Math.pow(v2.y - v1.y, 2) + Math.pow(v2.z - v1.z, 2)).toFixed(2);            
-            var height = Math.sqrt(Math.pow(v1.x - v0.x, 2) + Math.pow(v1.y - v0.y, 2) + Math.pow(v1.z - v0.z, 2)).toFixed(2);                       
+            var width = Math.sqrt(Math.pow(v2.x - v1.x, 2) + Math.pow(v2.y - v1.y, 2) + Math.pow(v2.z - v1.z, 2)).toFixed(4);            
+            var height = Math.sqrt(Math.pow(v1.x - v0.x, 2) + Math.pow(v1.y - v0.y, 2) + Math.pow(v1.z - v0.z, 2)).toFixed(4);                       
 
             // get position
             var x = ((v0.x + v1.x + v2.x + v3.x) / 4.0);
@@ -2489,6 +2579,40 @@ css3d.elementFactory = {
             div.style.width = width+'px';
             div.style.height = height+'px';
             div.style.backgroundColor = '#ccc';
+            
+            // texture mapping
+            if (matches.length >= 9) {
+                var tx0 = vt0.x * textureSize;
+                var ty0 = textureSize - (vt0.y * textureSize); 
+                var tx1 = vt1.x * textureSize;
+                var ty1 = textureSize - (vt1.y * textureSize); 
+                var tx2 = vt2.x * textureSize;
+                var ty2 = textureSize - (vt2.y * textureSize); 
+                var tx3 = vt3.x * textureSize;
+                var ty3 = textureSize - (vt3.y * textureSize);
+       
+                var vWidth = tx3 - tx1;
+                if (vWidth < 0) {
+                    vWidth = tx1 - tx3;
+                    tx1 = tx2;
+                }                
+                var vHeight = ty3 - ty1;
+                if (vHeight < 0) {
+                    vHeight = ty1 - ty3;
+                    ty1 = ty2;
+                }
+                
+                var scaleX = width/vWidth;
+                var scaleY = height/vHeight;
+                
+                // TODO:
+                // there is a problem with texture rotation
+                // some elements are 90 or 180 degrees rotated
+                div.style.backgroundPosition = (-tx1*scaleX).toFixed(4)+'px '+(-ty1*scaleY).toFixed(4)+'px';
+                div.style.backgroundImage = 'url("'+textureFile+'")';
+                div.style.backgroundSize = (textureSize*scaleX).toFixed(4)+'px '+(textureSize*scaleY).toFixed(4)+'px';
+            }            
+            
             container.appendChild(div);
             
             var element = new css3d.element(div);
@@ -2496,14 +2620,13 @@ css3d.elementFactory = {
             element.shading = shading;
             element.setTranslation(x, y, z);
             element.setRotationMatrix(rotationMatrix);
-            //element.setScale(1, -1, 1);
             element.inheritScaling = true;            
             element.setParent(elementGroup);
             scene.addElement(element);
 
             count++;
-        }
-        
+        }        
+       
         console.log('obj file loaded. ' + count + ' faces');
         
         elementGroup.setScale(-1, -1, 1);        
@@ -3005,9 +3128,33 @@ css3d.quaternion = (function()
      */
     var quaternion = function(x, y, z, w)
     {
+        /**
+         * x value
+         * @type {Number}
+         * @memberof! css3d.quaternion
+         * @instance
+         */
         this.x = x || 0;
+        /**
+         * y value
+         * @type {Number}
+         * @memberof! css3d.quaternion
+         * @instance
+         */
         this.y = y || 0;
+        /**
+         * z value
+         * @type {Number}
+         * @memberof! css3d.quaternion
+         * @instance
+         */
         this.z = z || 0;
+        /**
+         * w value
+         * @type {Number}
+         * @memberof! css3d.quaternion
+         * @instance
+         */
         this.w = w || 1;
 
         this.TOLERANCE = 0.00001;
@@ -3502,8 +3649,26 @@ css3d.vector3 = (function(css3d)
      */
     var vector3 = function(x, y, z)
     {
+        /**
+         * x value
+         * @type {Number}
+         * @memberof! css3d.vector3
+         * @instance
+         */
         this.x = x || 0;
+        /**
+         * y value
+         * @type {Number}
+         * @memberof! css3d.vector3
+         * @instance
+         */ 
         this.y = y || 0;
+        /**
+         * z value
+         * @type {Number}
+         * @memberof! css3d.vector3
+         * @instance
+         */
         this.z = z || 0;
     };
     
@@ -3714,9 +3879,33 @@ css3d.vector4 = (function()
      */
     var vector4 = function(x, y, z, w)
     {
+        /**
+         * x value
+         * @type {Number}
+         * @memberof! css3d.vector4
+         * @instance
+         */
         this.x = x || 0;
+        /**
+         * y value
+         * @type {Number}
+         * @memberof! css3d.vector4
+         * @instance
+         */
         this.y = y || 0;
+        /**
+         * z value
+         * @type {Number}
+         * @memberof! css3d.vector4
+         * @instance
+         */
         this.z = z || 0;
+        /**
+         * w value
+         * @type {Number}
+         * @memberof! css3d.vector4
+         * @instance
+         */
         this.w = w || 1;
     };
 
diff --git a/release/css3d.min.js b/release/css3d.min.js
index 4ee1579..169e49c 100644
--- a/release/css3d.min.js
+++ b/release/css3d.min.js
@@ -8,4 +8,4 @@
  * @license     http://www.opensource.org/licenses/mit-license.html  MIT License
  * @version     0.9
  */
-var css3d=function(e){var t=function(e,t){this._containerElement=e;this._prefix=null;this._styleTransform=null;this._styleBackfaceVisibility=null;this._styleFilter=null;this._styleTransformStyle=null;this._stylePerspective=null;this._needDepthSorting=false;this._hasFilter=true;this._scene=t;this._viewMatrix=null;this._isRendering=false;this._renderId=null;this._lastCalledTime=0;this.version="0.9";this.browserSupports3d=this._init();this.onRender=null};t.prototype._init=function(){if(!this._browserSupports3d()){return false}this._prefix=this._getPrefix();if(null==this._prefix){return false}this._initContainer();this._getNeedDepthSorting();this._getHasFilter();this._initElements();return true};t.prototype._browserSupports3d=function(){if(!window.getComputedStyle){return false}var t=e.createElement("p"),n,r={webkitTransform:"-webkit-transform",oTransform:"-o-transform",msTransform:"-ms-transform",mozTransform:"-moz-transform",transform:"transform"};e.body.insertBefore(t,null);for(var i in r){if(t.style[i]!==undefined){t.style[i]="translate3d(1px,1px,1px)";n=window.getComputedStyle(t).getPropertyValue(r[i])}}e.body.removeChild(t);return n!==undefined&&n.length>0&&n!=="none"};t.prototype._getPrefix=function(){var e=["transform","msTransform","mozTransform","webkitTransform","oTransform"];var t=["","ms","moz","webkit","o"];var n=null;for(var r=0;r<e.length;++r){if(typeof this._containerElement.style[e[r]]!="undefined"){n=t[r];break}}if(null!=n){this._styleTransform=n==""?"transform":n+"Transform";this._styleBackfaceVisibility=n==""?"backfaceVisibility":n+"BackfaceVisibility";this._styleFilter=n==""?"filter":n+"Filter";this._styleTransformStyle=n==""?"transformStyle":n+"TransformStyle";this._stylePerspective=n==""?"perspective":n+"Perspective"}return n};t.prototype._initContainer=function(){this._containerElement.style[this._styleTransformStyle]="preserve-3d";if(null!=this._scene){this._containerElement.style[this._stylePerspective]=this._scene.getCamera().perspective+"px"}};t.prototype._initElements=function(){if(null!=this._scene){var e=this._scene.getElements();for(var t=0;t<e.length;t++){e[t].init(this._hasFilter,this._containerElement)}}};t.prototype._getNeedDepthSorting=function(){var e=window.getComputedStyle(this._containerElement,null),t=e.getPropertyValue("-webkit-transform-style")||e.getPropertyValue("-moz-transform-style")||e.getPropertyValue("-ms-transform-style")||e.getPropertyValue("-o-transform-style")||e.getPropertyValue("transform-style");if(t!=="preserve-3d"){this._needDepthSorting=true}};t.prototype._getHasFilter=function(){this._containerElement.style[this._styleFilter]="brightness(1)";var e=window.getComputedStyle(this._containerElement,null),t=e.getPropertyValue("-webkit-filter")||e.getPropertyValue("-moz-filter")||e.getPropertyValue("-ms-filter")||e.getPropertyValue("-o-filter")||e.getPropertyValue("filter");this._containerElement.style[this._styleFilter]="none";if(t!=="brightness(1)"){this._hasFilter=false;return false}return true};t.prototype.setScene=function(e){this._scene=e;this._initElements();this._initContainer();return this};t.prototype.getScene=function(){return this._scene};t.prototype._zSortElements=function(){var e,n,r;var i=this._scene.getElements();for(var s=0;s<i.length;s++){if(null==i[s].getDomElement()){continue}if(null!=i[s].zIndex){i[s].getDomElement().style.zIndex=i[s].zIndex;continue}e=i[s].getWorldMatrix();n=t.matrix4.multiply(this._viewMatrix,e);r=i[s].getPivot().transform(n);i[s].worldView=n;i[s].getDomElement().style.zIndex=Math.round(r.z*10)}};t.prototype.update=function(){this._scene.update();return this};t.prototype.render=function(){this._viewMatrix=this._scene.getCamera().getViewMatrix();if(this._needDepthSorting){this._zSortElements()}var e=this._scene.getElements();for(var t=0;t<e.length;t++){this.renderElement(e[t])}return this};t.prototype.renderElement=function(e){if(null==e.getDomElement()){return this}var n;if(null!=e.worldView){n=e.worldView}else{n=t.matrix4.multiply(this._viewMatrix,e.getWorldMatrix())}var r="matrix3d(";r+=n[0].toFixed(10)+","+n[4].toFixed(10)+","+n[8].toFixed(10)+","+n[12].toFixed(10)+",";r+=n[1].toFixed(10)+","+n[5].toFixed(10)+","+n[9].toFixed(10)+","+n[13].toFixed(10)+",";r+=n[2].toFixed(10)+","+n[6].toFixed(10)+","+n[10].toFixed(10)+","+n[14].toFixed(10)+",";r+=n[3].toFixed(10)+","+n[7].toFixed(10)+","+n[11].toFixed(10)+","+n[15].toFixed(10);r+=")";e.getDomElement().style[this._styleTransform]=r;if(e.backfaceCullingDirty){var i="visible";if(e.getBackfaceCulling()){i="hidden"}e.getDomElement().style[this._styleBackfaceVisibility]=i;e.backfaceCullingDirty=false}if(e.shading){var s=e.normal.transform(e.getTotalRotation());s=s.toVector3().normalize();var o=Math.abs(s.dot(this._scene.getLight())).toFixed(10);o=o*this._scene.getShadingIntensity()+(1-this._scene.getShadingIntensity());if(this._hasFilter){e.getDomElement().style[this._styleFilter]="brightness("+o+")"}else if(null!=e.getShaderElement()){e.getShaderElement().style.opacity=1-o}}return this};t.prototype._requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return window.setTimeout(e,1e3/60)}};t.prototype._cancelAnimationFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||window.clearTimeout};t.prototype.startRender=function(){if(!this._isRendering){this._isRendering=true;window.requestAnimationFrame=this._requestAnimationFrame();this._renderLoop()}return this};t.prototype.stopRender=function(){if(this._isRendering){window.cancelAnimationFrame=this._cancelAnimationFrame();cancelAnimationFrame(this._renderId);this._isRendering=false;this._lastCalledTime=0}return this};t.prototype._renderLoop=function(){var e=(new Date).getTime();if(!this._lastCalledTime){this._lastCalledTime=e}var n=.06*(e-this._lastCalledTime);this._lastCalledTime=e;this.update().render();var r=this;this._renderId=requestAnimationFrame(function(){t.prototype._renderLoop.call(r)});if(null!=this.onRender){this.onRender(n)}};return t}(document);css3d.ajax=function(){var e={};var t={};e.x=function(){try{return new XMLHttpRequest}catch(e){try{return new ActiveXObject("Msxml2.XMLHTTP")}catch(e){try{return new ActiveXObject("Microsoft.XMLHTTP")}catch(e){return false}}}return false};e.statechange=function(e){if(e.xmlHttp.readyState==4){if(e.responsefnc!=null){e.responsefnc(e.xmlHttp.responseText)}}return};e.active=function(e){switch(e.xmlHttp.readyState){case 1:case 2:case 3:return true;break;default:return false;break}};t.send=function(t,n,r,i,s,o){var u=e.x();if(!u){throw new Error("No ajax support")}var s=s||5e3;var a=function(){throw new Error("Ajax error")};if(!o){var f=new Date;var l=f.getTime();if(r=="GET"){t=t+"&__t__="+l}else if(r=="POST"){i=i+"&__t__="+l}}var c={};c.xmlHttp=u;c.responsefnc=n;c.errorfnc=a;u.onreadystatechange=function(){e.statechange(c)};u.open(r,t,true);if(r=="POST"){u.setRequestHeader("Content-Type","application/x-www-form-urlencoded")}u.send(i);c.timeout=window.setTimeout(function(){if(e.active(c)){c.xmlHttp.abort();throw new Error("Ajax timeout");return}},s)};t.get=function(e,n,r){t.send(e,n,"GET",null,r)};t.getS=function(t){var n=e.x();if(!n){throw new Error("No ajax support")}n.open("GET",t,false);n.send(null);return n.responseText};t.post=function(e,n,r,i){t.send(e,n,"POST",r,i)};t.postS=function(t,n){var r=e.x();if(!r){throw new Error("No ajax support")}r.open("POST",t,false);r.setRequestHeader("Content-Type","application/x-www-form-urlencoded");r.send(n);return r.responseText};return t}();css3d.camera=function(){var e=function(e,t,n,r){this.perspective=r||800;e=null!=e?e:0;t=null!=t?t:0;n=null!=n?n:this.perspective;this._view=css3d.matrix4.identity();this._rotation=css3d.matrix4.identity();this._translation=new css3d.vector3(e,t,n);this._isDirty=true};e.prototype._calcFov=function(e,t){return 360*Math.atan(t/(2*e))/Math.PI};e.prototype.setRotation=function(e,t){this._rotation=css3d.matrix4.rotationAxis(e,t);this._isDirty=true;return this};e.prototype.setRotationXYZ=function(e,t,n){e=e||0;t=t||0;n=n||0;var r=null;r=css3d.matrix4.rotationZ(n);r=css3d.matrix4.multiply(r,css3d.matrix4.rotationY(t));r=css3d.matrix4.multiply(r,css3d.matrix4.rotationX(e));this._rotation=r;this._isDirty=true;return this};e.prototype.setRotationMatrix=function(e){this._rotation=e;this._isDirty=true;return this};e.prototype.getRotation=function(){return this._rotation};e.prototype.setTranslation=function(e,t,n){this._translation.x=e;this._translation.y=t;this._translation.z=n;this._isDirty=true;return this};e.prototype.getTranslation=function(){return this._translation};e.prototype.backVector=function(){return css3d.matrix4.back(this._rotation).normalize()};e.prototype.forward=function(e){var t=this.backVector();this.setTranslation(this._translation.x-t.x*e,this._translation.y-t.y*e,this._translation.z-t.z*e);return this};e.prototype.rightVector=function(){return css3d.matrix4.right(this._rotation).normalize()};e.prototype.left=function(e){var t=this.rightVector();this.setTranslation(this._translation.x-t.x*e,this._translation.y-t.y*e,this._translation.z-t.z*e);return this};e.prototype.upVector=function(){return css3d.matrix4.up(this._rotation).normalize()};e.prototype.up=function(e){var t=this.upVector();this.setTranslation(this._translation.x+t.x*e,this._translation.y+t.y*e,this._translation.z+t.z*e);return this};e.prototype.getViewMatrix=function(){return this._view};e.prototype.setViewMatrix=function(e){this._rotation=[e[0],e[1],e[2],0,e[4],e[5],e[6],0,e[8],e[9],e[10],0,0,0,0,1];this.setTranslation(e[3],e[7],e[11]);this._isDirty=true;return this};e.prototype.getFaceElementMatrix=function(e,t){t=null==t?this.perspective:t;var n=e.getPivotTransformed();var r=e.getTotalRotation();var i=e.backVector();var s=n.x+i.x*t;var o=n.y+i.y*t;var u=n.z+i.z*t;r[3]=s;r[7]=o;r[11]=u;return r};e.prototype.getFaceElementLerpFunction=function(e,t){var n=this.getFaceElementMatrix(e,t);var r=this.getTranslation().clone();var i=new css3d.vector3(n[3],n[7],n[11]);n[3]=0;n[7]=0;n[11]=0;var s=this.getRotation();var o=css3d.quaternion.prototype.fromMatrix4(n);var u=this;return function(e){u.lerp(r,i,s,o,e)}};e.prototype.lerpTranslation=function(e,t,n){this.setTranslation(css3d.math.lerp(e.x,t.x,n),css3d.math.lerp(e.y,t.y,n),css3d.math.lerp(e.z,t.z,n));return this};e.prototype.lerpRotation=function(e,t,n){var r=css3d.quaternion.prototype.fromMatrix4(e);var i=css3d.quaternion.prototype.slerp(r,t,n);this.setRotationMatrix(i.toMatrix4());return this};e.prototype.lerp=function(e,t,n,r,i){if(i==null){return this}if(e&&t){this.lerpTranslation(e,t,i)}if(n&&r){this.lerpRotation(n,r,i)}return this};e.prototype.lookAtElement=function(e){var t=css3d.matrix4.lookAt(this.getTranslation(),e.getTranslation(),new css3d.vector3(0,-1,0));this.setRotationMatrix(t);return this};e.prototype.update=function(){if(this._isDirty){var e=this._rotation;var t=this.backVector();e[3]=this._translation.x-t.x*this.perspective;e[7]=this._translation.y-t.y*this.perspective;e[11]=this._translation.z-t.z*this.perspective;this._view=css3d.matrix4.fastInverse(e);this._isDirty=false}return this};return e}();css3d.element=function(){var e=function(e){this._domElement=e;this._pivot=new css3d.vector3(0,0,0);this._world=css3d.matrix4.identity();this._scale=new css3d.vector3(1,1,1);this._rotation=css3d.matrix4.identity();this._translation=new css3d.vector3;this._parent=null;this._children=[];this._shaderElement=null;this._backfaceCulling=false;this._backfaceCullingOld=null;this._isDirty=true;this._isScaled=false;this._isRotated=false;this._isTranslated=false;this._isPivotChanged=false;this.shading=true;this.backfaceCullingDirty=false;this.worldView=null;this.normal=new css3d.vector3(0,0,1);this.inheritScaling=false;this.autoCenter=true;this.zIndex=null};e.prototype.init=function(e,t){if(!e){this._createShaderElement()}if(null!=this._domElement&&this.autoCenter){var n=t.offsetWidth;var r=t.offsetHeight;var i=this._domElement.offsetWidth;var s=this._domElement.offsetHeight;this._domElement.style.position="absolute";this._domElement.style.left=(n-i)/2+"px";this._domElement.style.top=(r-s)/2+"px"}return this};e.prototype._createShaderElement=function(){if(null==this._domElement){return}var e=document.createElement("div");e.style.position="absolute";e.style.top="0";e.style.left="0";e.style.width="100%";e.style.height="100%";e.style.backgroundColor="#000000";e.style.opacity=0;e.style.pointerEvents="none";e.className="css3d-shader";this._domElement.appendChild(e);this._shaderElement=e};e.prototype.getDomElement=function(){return this._domElement};e.prototype.getShaderElement=function(){return this._shaderElement};e.prototype.setParent=function(e){this._parent=e;e.addChild(this);return this};e.prototype.addChild=function(e){this._children.push(e);e._parent=this;return this};e.prototype.getChildren=function(){return this._children};e.prototype.setChildrenDirty=function(){for(var e=0;e<this._children.length;e++){this._children[e]._isDirty=true}return this};e.prototype.setBackfaceCulling=function(e){this._backfaceCulling=e;if(e!=this._backfaceCullingOld){this.backfaceCullingDirty=true;this._backfaceCullingOld=e}return this};e.prototype.getBackfaceCulling=function(){return this._backfaceCulling};e.prototype.getWorldMatrix=function(){return this._world};e.prototype.setPivot=function(e,t,n){this._pivot.x=e;this._pivot.y=t;this._pivot.z=n;if(!this._pivot.isZero()){this._isPivotChanged=true}else{this._isPivotChanged=false}return this};e.prototype.getPivot=function(){return this._pivot};e.prototype.getPivotTransformed=function(){var e=this.getPivot().transform(this._world).toVector3();return e};e.prototype.setScale=function(e,t,n){this._scale.x=e;this._scale.y=t;this._scale.z=n;this._isDirty=true;this._isScaled=e==1&&t==1&&n==1?false:true;this.setChildrenDirty();return this};e.prototype.getScale=function(){return this._scale};e.prototype.setRotation=function(e,t){this._isRotated=t==0?false:true;if(this._isRotated){this._rotation=css3d.matrix4.rotationAxis(e,t)}else{this._rotation=css3d.matrix4.identity()}this._isDirty=true;this.setChildrenDirty();return this};e.prototype.setRotationXYZ=function(e,t,n){e=e||0;t=t||0;n=n||0;this._isRotated=e==0&&t==0&&n==0?false:true;var r=null;if(this._isRotated){r=css3d.matrix4.rotationZ(n);r=css3d.matrix4.multiply(r,css3d.matrix4.rotationY(t));r=css3d.matrix4.multiply(r,css3d.matrix4.rotationX(e))}else{r=css3d.matrix4.identity()}this._rotation=r;this._isDirty=true;this.setChildrenDirty();return this};e.prototype.setRotationMatrix=function(e){this._rotation=e;this._isDirty=true;this.setChildrenDirty();this._isRotated=true;return this};e.prototype.getRotation=function(){return this._rotation};e.prototype.getTotalRotation=function(){var e=this._rotation;if(null!=this._parent){e=css3d.matrix4.multiply(this._parent.getTotalRotation(),e)}return e};e.prototype.setTranslation=function(e,t,n){this._translation.x=e;this._translation.y=t;this._translation.z=n;this._isDirty=true;this.setChildrenDirty();this._isTranslated=e==0&&t==0&&n==0?false:true;return this};e.prototype.getTranslation=function(){return this._translation};e.prototype.backVector=function(){return css3d.matrix4.back(this._world).normalize()};e.prototype.forward=function(e){var t=this.backVector();this.setTranslation(this._translation.x-t.x*e,this._translation.y-t.y*e,this._translation.z-t.z*e);return this};e.prototype.rightVector=function(){return css3d.matrix4.right(this._world).normalize()};e.prototype.left=function(e){var t=this.rightVector();this.setTranslation(this._translation.x-t.x*e,this._translation.y-t.y*e,this._translation.z-t.z*e);return this};e.prototype.upVector=function(){return css3d.matrix4.up(this._world).normalize()};e.prototype.up=function(e){var t=this.upVector();this.setTranslation(this._translation.x+t.x*e,this._translation.y+t.y*e,this._translation.z+t.z*e);return this};e.prototype.setMatrix=function(e,t){if(null==this._domElement){return this}var n=css3d.matrix4.translation(this._translation.x,this._translation.y,this._translation.z);n=css3d.matrix4.multiply(n,css3d.matrix4.scale(this._scale.x,this._scale.y,this._scale.z));n=css3d.matrix4.multiply(n,this._rotation);var r="matrix3d(";r+=n[0].toFixed(10)+","+n[4].toFixed(10)+","+n[8].toFixed(10)+","+n[12].toFixed(10)+",";r+=n[1].toFixed(10)+","+n[5].toFixed(10)+","+n[9].toFixed(10)+","+n[13].toFixed(10)+",";r+=n[2].toFixed(10)+","+n[6].toFixed(10)+","+n[10].toFixed(10)+","+n[14].toFixed(10)+",";r+=n[3].toFixed(10)+","+n[7].toFixed(10)+","+n[11].toFixed(10)+","+n[15].toFixed(10);r+=")";this._domElement.style[e]=r;var i="visible";if(this.getBackfaceCulling()){i="hidden"}this._domElement.style[t]=i;return this};e.prototype.lerpScale=function(e,t,n){this.setScale(css3d.math.lerp(e.x,t.x,n),css3d.math.lerp(e.y,t.y,n),css3d.math.lerp(e.z,t.z,n));return this};e.prototype.lerpTranslation=function(e,t,n){this.setTranslation(css3d.math.lerp(e.x,t.x,n),css3d.math.lerp(e.y,t.y,n),css3d.math.lerp(e.z,t.z,n));return this};e.prototype.lerpRotation=function(e,t,n){var r=css3d.quaternion.prototype.fromMatrix4(e);var i=css3d.quaternion.prototype.slerp(r,t,n);this.setRotationMatrix(i.toMatrix4());return this};e.prototype.lerp=function(e,t,n,r,i,s,o){if(o==null){return this}if(e&&t){this.lerpScale(e,t,o)}if(n&&r){this.lerpTranslation(n,r,o)}if(i&&s){this.lerpRotation(i,s,o)}return this};e.prototype.getLerpFunction=function(e,t,n){var r=this.getScale().clone();var i=this.getTranslation().clone();var s=this.getRotation();var o=this;return function(u){o.lerp(r,e,i,t,s,n,u)}};e.prototype.update=function(){if(this._isDirty){this._world=css3d.matrix4.translation(this._translation.x,this._translation.y,this._translation.z);if(this._isScaled){this._world=css3d.matrix4.multiply(this._world,css3d.matrix4.scale(this._scale.x,this._scale.y,this._scale.z))}if(this._isRotated){if(this._isPivotChanged){this._world=css3d.matrix4.multiply(this._world,css3d.matrix4.translation(this._pivot.x,this._pivot.y,this._pivot.z))}this._world=css3d.matrix4.multiply(this._world,this._rotation);if(this._isPivotChanged){this._world=css3d.matrix4.multiply(this._world,css3d.matrix4.translation(-this._pivot.x,-this._pivot.y,-this._pivot.z))}}if(null!=this._parent){if(!this.inheritScaling){if(this._parent._isScaled){this._world=css3d.matrix4.multiply(css3d.matrix4.scale(1/this._parent.getScale().x,1/this._parent.getScale().y,1/this._parent.getScale().z),this._world)}}this._parent.update();this._world=css3d.matrix4.multiply(this._parent.getWorldMatrix(),this._world)}this._isDirty=false}return this};return e}();css3d.elementFactory={cube:function(e,t,n,r,i,s,o){var u=n/2;var a=new css3d.element;a.setTranslation(0,0,-u);var f=document.createElement("div");f.style.position="absolute";f.style.width=n+"px";f.style.height=n+"px";e.appendChild(f);var l=document.createElement("div");l.style.position="absolute";l.style.width=n+"px";l.style.height=n+"px";e.appendChild(l);var c=document.createElement("div");c.style.position="absolute";c.style.width=n+"px";c.style.height=n+"px";e.appendChild(c);var h=document.createElement("div");h.style.position="absolute";h.style.width=n+"px";h.style.height=n+"px";e.appendChild(h);var p=document.createElement("div");p.style.position="absolute";p.style.width=n+"px";p.style.height=n+"px";e.appendChild(p);var d=document.createElement("div");d.style.position="absolute";d.style.width=n+"px";d.style.height=n+"px";e.appendChild(d);if(r){f.id=r+"-back";l.id=r+"-front";c.id=r+"-left";h.id=r+"-right";p.id=r+"-top";d.id=r+"-bottom"}if(i){f.className=i+" "+i+"-back";l.className=i+" "+i+"-front";c.className=i+" "+i+"-left";h.className=i+" "+i+"-right";p.className=i+" "+i+"-top";d.className=i+" "+i+"-bottom"}s=s==null?true:s;o=o==null?true:o;var v=new css3d.element(f);v.setBackfaceCulling(s);v.shading=o;v.setTranslation(0,0,-u);v.setRotation({x:0,y:1,z:0},Math.PI);v.inheritScaling=true;var m=new css3d.element(l);m.setBackfaceCulling(s);m.shading=o;m.setTranslation(0,0,u);m.inheritScaling=true;var g=new css3d.element(c);g.setBackfaceCulling(s);g.shading=o;g.setRotation({x:0,y:1,z:0},-Math.PI/2);g.setTranslation(-u,0,0);g.inheritScaling=true;var y=new css3d.element(h);y.setBackfaceCulling(s);y.shading=o;y.setRotation({x:0,y:1,z:0},Math.PI/2);y.setTranslation(u,0,0);y.inheritScaling=true;var b=new css3d.element(p);b.setBackfaceCulling(s);b.shading=o;b.setRotation({x:1,y:0,z:0},Math.PI/2);b.setTranslation(0,-u,0);b.inheritScaling=true;var w=new css3d.element(d);w.setBackfaceCulling(s);w.shading=o;w.setRotation({x:1,y:0,z:0},-Math.PI/2);w.setTranslation(0,u,0);w.inheritScaling=true;v.setParent(a);m.setParent(a);g.setParent(a);y.setParent(a);b.setParent(a);w.setParent(a);t.addElement(a);t.addElement(v);t.addElement(m);t.addElement(g);t.addElement(y);t.addElement(b);t.addElement(w);return a},cuboid:function(e,t,n,r,i,s,o,u,a,f){var l=n/2;var c=r/2;var h=i/2;f=f==null?true:f;var p=new css3d.element;p.setTranslation(0,0,-h);var d=document.createElement("div");d.style.position="absolute";d.style.width=n+"px";d.style.height=r+"px";e.appendChild(d);var v=document.createElement("div");v.style.position="absolute";v.style.width=n+"px";v.style.height=r+"px";e.appendChild(v);var m=document.createElement("div");m.style.position="absolute";m.style.width=i+"px";m.style.height=r+"px";e.appendChild(m);var g=document.createElement("div");g.style.position="absolute";g.style.width=i+"px";g.style.height=r+"px";e.appendChild(g);if(f){var y=document.createElement("div");y.style.position="absolute";y.style.width=n+"px";y.style.height=i+"px";e.appendChild(y);var b=document.createElement("div");b.style.position="absolute";b.style.width=n+"px";b.style.height=i+"px";e.appendChild(b)}if(s){d.id=s+"-back";v.id=s+"-front";m.id=s+"-left";g.id=s+"-right";if(f){y.id=s+"-top";b.id=s+"-bottom"}}if(o){d.className=o+" "+o+"-back";v.className=o+" "+o+"-front";m.className=o+" "+o+"-left";g.className=o+" "+o+"-right";if(f){y.className=o+" "+o+"-top";b.className=o+" "+o+"-bottom"}}u=u==null?true:u;a=a==null?true:a;var w=new css3d.element(d);w.setBackfaceCulling(u);w.shading=a;w.setTranslation(0,0,-h);w.setRotation({x:0,y:1,z:0},Math.PI);w.inheritScaling=true;var E=new css3d.element(v);E.setBackfaceCulling(u);E.shading=a;E.setTranslation(0,0,h);E.inheritScaling=true;var S=new css3d.element(m);S.setBackfaceCulling(u);S.shading=a;S.setRotation({x:0,y:1,z:0},-Math.PI/2);S.setTranslation(-l,0,0);S.inheritScaling=true;var x=new css3d.element(g);x.setBackfaceCulling(u);x.shading=a;x.setRotation({x:0,y:1,z:0},Math.PI/2);x.setTranslation(l,0,0);x.inheritScaling=true;if(f){var T=new css3d.element(y);T.setBackfaceCulling(u);T.shading=a;T.setRotation({x:1,y:0,z:0},Math.PI/2);T.setTranslation(0,-c,0);T.inheritScaling=true;var N=new css3d.element(b);N.setBackfaceCulling(u);N.shading=a;N.setRotation({x:1,y:0,z:0},-Math.PI/2);N.setTranslation(0,c,0);N.inheritScaling=true}w.setParent(p);E.setParent(p);S.setParent(p);x.setParent(p);if(f){T.setParent(p);N.setParent(p)}t.addElement(p);t.addElement(w);t.addElement(E);t.addElement(S);t.addElement(x);if(f){t.addElement(T);t.addElement(N)}return p},cubeElements:function(e,t,n,r,i,s,o,u,a,f){var l=t/2;var c=new css3d.element;c.setTranslation(0,0,-l);n.style.position="absolute";r.style.position="absolute";i.style.position="absolute";s.style.position="absolute";o.style.position="absolute";u.style.position="absolute";a=a==null?true:a;f=f==null?true:f;var h=new css3d.element(n);h.setBackfaceCulling(a);h.shading=f;h.setTranslation(0,0,-l);h.setRotation({x:0,y:1,z:0},Math.PI);h.inheritScaling=true;var p=new css3d.element(r);p.setBackfaceCulling(a);p.shading=f;p.setTranslation(0,0,l);p.inheritScaling=true;var d=new css3d.element(i);d.setBackfaceCulling(a);d.shading=f;d.setRotation({x:0,y:1,z:0},-Math.PI/2);d.setTranslation(-l,0,0);d.inheritScaling=true;var v=new css3d.element(s);v.setBackfaceCulling(a);v.shading=f;v.setRotation({x:0,y:1,z:0},Math.PI/2);v.setTranslation(l,0,0);v.inheritScaling=true;var m=new css3d.element(o);m.setBackfaceCulling(a);m.shading=f;m.setRotation({x:1,y:0,z:0},Math.PI/2);m.setTranslation(0,-l,0);m.inheritScaling=true;var g=new css3d.element(u);g.setBackfaceCulling(a);g.shading=f;g.setRotation({x:1,y:0,z:0},-Math.PI/2);g.setTranslation(0,l,0);g.inheritScaling=true;h.setParent(c);p.setParent(c);d.setParent(c);v.setParent(c);m.setParent(c);g.setParent(c);e.addElement(c);e.addElement(h);e.addElement(p);e.addElement(d);e.addElement(v);e.addElement(m);e.addElement(g);return c},cube2:function(e,t,n,r,i,s){var o=r/2;var u=document.createElement("div");u.style.position="absolute";u.style[t._styleTransformStyle]="preserve-3d";e.appendChild(u);var a=document.createElement("div");a.style.position="absolute";u.appendChild(a);var f=document.createElement("div");f.style.position="absolute";u.appendChild(f);var l=document.createElement("div");l.style.position="absolute";u.appendChild(l);var c=document.createElement("div");c.style.position="absolute";u.appendChild(c);var h=document.createElement("div");h.style.position="absolute";u.appendChild(h);var p=document.createElement("div");p.style.position="absolute";u.appendChild(p);if(i){u.id=i+"-main";a.id=i+"-back";f.id=i+"-front";l.id=i+"-left";c.id=i+"-right";h.id=i+"-top";p.id=i+"-bottom"}if(s){u.className=s+" "+s+"-main";a.className=s+" "+s+"-back";f.className=s+" "+s+"-front";l.className=s+" "+s+"-left";c.className=s+" "+s+"-right";h.className=s+" "+s+"-top";p.className=s+" "+s+"-bottom"}var d=new css3d.element(u);d.setTranslation(0,0,-o);d.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var v=new css3d.element(a);v.setBackfaceCulling(true);v.setTranslation(0,0,-o);v.setRotation({x:0,y:1,z:0},Math.PI);v.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var m=new css3d.element(f);m.setBackfaceCulling(true);m.setTranslation(0,0,o);m.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var g=new css3d.element(l);g.setBackfaceCulling(true);g.setRotation({x:0,y:1,z:0},-Math.PI/2);g.setTranslation(-o,0,0);g.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var y=new css3d.element(c);y.setBackfaceCulling(true);y.setRotation({x:0,y:1,z:0},Math.PI/2);y.setTranslation(o,0,0);y.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var b=new css3d.element(h);b.setBackfaceCulling(true);b.setRotation({x:1,y:0,z:0},Math.PI/2);b.setTranslation(0,-o,0);b.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var w=new css3d.element(p);w.setBackfaceCulling(true);w.setRotation({x:1,y:0,z:0},-Math.PI/2);w.setTranslation(0,o,0);w.setMatrix(t._styleTransform,t._styleBackfaceVisibility);n.addElement(d);return d},plane:function(e,t,n,r,i,s,o,u){var a=n/r;var f=n/2;var l=new css3d.element;t.addElement(l);o=o==null?true:o;u=u==null?true:u;var c;var h;for(var p=0;p<r;p++){for(var d=0;d<r;d++){c=document.createElement("div");c.style.position="absolute";c.style.width=a+"px";c.style.height=a+"px";e.appendChild(c);if(i){c.id=i+"-"+p+"-"+d}if(s){c.className=s+" "+s+"-"+p+"-"+d}h=new css3d.element(c);h.setBackfaceCulling(o);h.shading=u;h.setTranslation(-f+d*a,-f+p*a,0);h.inheritScaling=true;h.setParent(l);t.addElement(h)}}return l},skybox:function(e,t,n,r,i){var s=(n-2)/2;var o=new css3d.element;var u=document.createElement("div");u.style.position="absolute";u.style.width=n+"px";u.style.height=n+"px";e.appendChild(u);var a=document.createElement("div");a.style.position="absolute";a.style.width=n+"px";a.style.height=n+"px";e.appendChild(a);var f=document.createElement("div");f.style.position="absolute";f.style.width=n+"px";f.style.height=n+"px";e.appendChild(f);var l=document.createElement("div");l.style.position="absolute";l.style.width=n+"px";l.style.height=n+"px";e.appendChild(l);var c=document.createElement("div");c.style.position="absolute";c.style.width=n+"px";c.style.height=n+"px";e.appendChild(c);var h=document.createElement("div");h.style.position="absolute";h.style.width=n+"px";h.style.height=n+"px";e.appendChild(h);if(r){u.id=r+"-back";a.id=r+"-front";f.id=r+"-left";l.id=r+"-right";c.id=r+"-top";h.id=r+"-bottom"}if(i){u.className=i+" "+i+"-back";a.className=i+" "+i+"-front";f.className=i+" "+i+"-left";l.className=i+" "+i+"-right";c.className=i+" "+i+"-top";h.className=i+" "+i+"-bottom"}var p=true;var d=false;var v=new css3d.element(u);v.setBackfaceCulling(p);v.shading=d;v.setTranslation(0,0,-s);v.inheritScaling=true;var m=new css3d.element(a);m.setBackfaceCulling(p);m.shading=d;m.setTranslation(0,0,s);m.setRotation({x:0,y:1,z:0},Math.PI);m.inheritScaling=true;var g=new css3d.element(f);g.setBackfaceCulling(p);g.shading=d;g.setRotation({x:0,y:1,z:0},Math.PI/2);g.setTranslation(-s,0,0);g.inheritScaling=true;var y=new css3d.element(l);y.setBackfaceCulling(p);y.shading=d;y.setRotation({x:0,y:1,z:0},-Math.PI/2);y.setTranslation(s,0,0);y.inheritScaling=true;var b=new css3d.element(c);b.setBackfaceCulling(p);b.shading=d;b.setRotation({x:1,y:0,z:0},-Math.PI/2);b.setTranslation(0,-s,0);b.inheritScaling=true;var w=new css3d.element(h);w.setBackfaceCulling(p);w.shading=d;w.setRotation({x:1,y:0,z:0},Math.PI/2);w.setTranslation(0,s,0);w.inheritScaling=true;v.setParent(o);m.setParent(o);g.setParent(o);y.setParent(o);b.setParent(o);w.setParent(o);t.addElement(o);t.addElement(v);t.addElement(m);t.addElement(g);t.addElement(y);t.addElement(b);t.addElement(w);return o},fromObj:function(e,t,n,r,i,s,o){r=r||"model";i=i==null?true:i;s=s==null?true:s;o=o==null?false:o;var u=css3d.ajax.getS(n);var a=[];var f=[];var l=[];l[0]=[204,204,204];var c=/c ([0-9]*) ([0-9]*) ([0-9]*)/gim;var h=/v ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;var p=/f ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*)(.*)$/gim;var d=/[0-9\/.]* ([0-9])$/;var v=false;while(v=h.exec(u)){a.push([parseFloat(v[1])*-1,parseFloat(v[2]),parseFloat(v[3])])}var m=new css3d.element;var g=0;while(v=p.exec(u)){if(v.length<5){continue}var y=Math.abs(parseInt(v[1]))-1;var b=Math.abs(parseInt(v[2]))-1;var w=Math.abs(parseInt(v[3]))-1;var E=Math.abs(parseInt(v[4]))-1;var S=new css3d.vector3(a[y][0],a[y][1],a[y][2]);var x=new css3d.vector3(a[b][0],a[b][1],a[b][2]);var T=new css3d.vector3(a[w][0],a[w][1],a[w][2]);var N=new css3d.vector3(a[E][0],a[E][1],a[E][2]);var C=css3d.vector3.prototype.cross(css3d.vector3.prototype.sub2(x,S),css3d.vector3.prototype.sub2(T,S)).normalize();if(!o){C.x=-C.x;C.y=-C.y;C.z=-C.z}var k=css3d.vector3.prototype.cross(C,css3d.vector3.prototype.sub2(x,S).normalize()).normalize();var L=css3d.vector3.prototype.cross(C,k);var A=C;var O=[k.x,L.x,A.x,0,k.y,L.y,A.y,0,k.z,L.z,A.z,0,0,0,0,1];var M=Math.sqrt(Math.pow(T.x-x.x,2)+Math.pow(T.y-x.y,2)+Math.pow(T.z-x.z,2)).toFixed(2);var _=Math.sqrt(Math.pow(x.x-S.x,2)+Math.pow(x.y-S.y,2)+Math.pow(x.z-S.z,2)).toFixed(2);var D=(S.x+x.x+T.x+N.x)/4;var P=(S.y+x.y+T.y+N.y)/4;var H=(S.z+x.z+T.z+N.z)/4;var B=document.createElement("div");B.className=r+" "+r+"-"+g;B.style.position="absolute";B.style.width=M+"px";B.style.height=_+"px";B.style.backgroundColor="#ccc";e.appendChild(B);var j=new css3d.element(B);j.setBackfaceCulling(i);j.shading=s;j.setTranslation(D,P,H);j.setRotationMatrix(O);j.inheritScaling=true;j.setParent(m);t.addElement(j);g++}console.log("obj file loaded. "+g+" faces");m.setScale(-1,-1,1);t.addElement(m);return m}};css3d.math={};css3d.math.lerp=function(e,t,n){return e+(t-e)*n};css3d.math.randomNumber=function(e,t){return Math.random()*(t-e)+e};css3d.math.randomInteger=function(e,t){return Math.floor(Math.random()*(t-e+1))+e};css3d.math.interpolation={};css3d.math.interpolation.hermite=function(e){return css3d.math.lerp(0,1,e*e*(3-2*e))};css3d.math.interpolation.sinerp=function(e){return css3d.math.lerp(0,1,Math.sin(e*Math.PI*.5))};css3d.math.interpolation.bounce=function(e){return 1-Math.abs(Math.sin(5.5*(e+1)*(e+1))*(1-e))};css3d.math.interpolation.berp=function(e){return(Math.sin(e*Math.PI*(.2+2.5*e*e*e))*Math.pow(1.01-e,2.2)+e)*(1+1.2*(1-e))};css3d.math.interpolation.smoothStep=function(e){var t=e/1;return-2*t*t*t+3*t*t};css3d.matrix4={D2R:Math.PI/180,identity:function(){return[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]},multiply:function(e,t){return[e[0]*t[0]+e[1]*t[4]+e[2]*t[8]+e[3]*t[12],e[0]*t[1]+e[1]*t[5]+e[2]*t[9]+e[3]*t[13],e[0]*t[2]+e[1]*t[6]+e[2]*t[10]+e[3]*t[14],e[0]*t[3]+e[1]*t[7]+e[2]*t[11]+e[3]*t[15],e[4]*t[0]+e[5]*t[4]+e[6]*t[8]+e[7]*t[12],e[4]*t[1]+e[5]*t[5]+e[6]*t[9]+e[7]*t[13],e[4]*t[2]+e[5]*t[6]+e[6]*t[10]+e[7]*t[14],e[4]*t[3]+e[5]*t[7]+e[6]*t[11]+e[7]*t[15],e[8]*t[0]+e[9]*t[4]+e[10]*t[8]+e[11]*t[12],e[8]*t[1]+e[9]*t[5]+e[10]*t[9]+e[11]*t[13],e[8]*t[2]+e[9]*t[6]+e[10]*t[10]+e[11]*t[14],e[8]*t[3]+e[9]*t[7]+e[10]*t[11]+e[11]*t[15],e[12]*t[0]+e[13]*t[4]+e[14]*t[8]+e[15]*t[12],e[12]*t[1]+e[13]*t[5]+e[14]*t[9]+e[15]*t[13],e[12]*t[2]+e[13]*t[6]+e[14]*t[10]+e[15]*t[14],e[12]*t[3]+e[13]*t[7]+e[14]*t[11]+e[15]*t[15]]},rotationX:function(e){var t=Math.cos(e),n=Math.sin(e);return[1,0,0,0,0,t,-n,0,0,n,t,0,0,0,0,1]},rotationY:function(e){var t=Math.cos(e),n=Math.sin(e);return[t,0,n,0,0,1,0,0,-n,0,t,0,0,0,0,1]},rotationZ:function(e){var t=Math.cos(e),n=Math.sin(e);return[t,-n,0,0,n,t,0,0,0,0,1,0,0,0,0,1]},rotationAxis:function(e,t){var n=Math.cos(t);var r=Math.sin(t);var i=1-n;var s=e.x,o=e.y,u=e.z;var a=i*s,f=i*o;return[a*s+n,a*o-r*u,a*u+r*o,0,a*o+r*u,f*o+n,f*u-r*s,0,a*u-r*o,f*u+r*s,i*u*u+n,0,0,0,0,1]},scale:function(e,t,n){return[e,0,0,0,0,t,0,0,0,0,n,0,0,0,0,1]},translation:function(e,t,n){return[1,0,0,e,0,1,0,t,0,0,1,n,0,0,0,1]},right:function(e){return new css3d.vector3(e[0],e[4],e[8])},up:function(e){return new css3d.vector3(-e[1],-e[5],-e[9])},back:function(e){return new css3d.vector3(e[2],e[6],e[10])},frustum:function(e,t,n,r,i,s){var o=t-e;var u=r-n;var a=s-i;var f=2*i;return[f/o,0,(t+e)/o,0,0,f/u,(r+n)/u,0,0,0,-(s+i)/a,-2*s*i/a,0,0,-1,0]},projection:function(e,t,n,r,i){var s=e*this.D2R;var o=Math.tan(s/2)*r;var u=o*(t/n);return this.frustum(-u,u,-o,o,r,i)},lookAt:function(e,t,n){var r=new css3d.vector3(t.x,t.y,t.z);var i=new css3d.vector3(e.x,e.y,e.z);var s=i.sub(r).normalize();var o=css3d.vector3.prototype.cross(s,n).normalize();var u=css3d.vector3.prototype.cross(s,o);return[o.x,u.x,s.x,0,o.y,u.y,s.y,0,o.z,u.z,s.z,0,0,0,0,1]},transpose:function(e){return[e[0],e[4],e[8],e[12],e[1],e[5],e[9],e[13],e[2],e[6],e[10],e[14],e[3],e[7],e[11],e[15]]},fastInverse:function(e){var t=-e[3]*e[0]+ -e[7]*e[4]+ -e[11]*e[8];var n=-e[3]*e[1]+ -e[7]*e[5]+ -e[11]*e[9];var r=-e[3]*e[2]+ -e[7]*e[6]+ -e[11]*e[10];return[e[0],e[4],e[8],t,e[1],e[5],e[9],n,e[2],e[6],e[10],r,0,0,0,1]},toAxisAngle:function(e){var t=css3d.quaternion.prototype.fromMatrix4(e);return t.toAxisAngle()},toString:function(e){var t="";t+=e[0].toFixed(2)+",	"+e[1].toFixed(2)+",	"+e[2].toFixed(2)+",	"+e[3].toFixed(2)+","+"\n";t+=e[4].toFixed(2)+",	"+e[5].toFixed(2)+",	"+e[6].toFixed(2)+",	"+e[7].toFixed(2)+","+"\n";t+=e[8].toFixed(2)+",	"+e[9].toFixed(2)+",	"+e[10].toFixed(2)+",	"+e[11].toFixed(2)+","+"\n";t+=e[12].toFixed(2)+",	"+e[13].toFixed(2)+",	"+e[14].toFixed(2)+",	"+e[15].toFixed(2);t+="";return t}};css3d.quaternion=function(){var e=function(e,t,n,r){this.x=e||0;this.y=t||0;this.z=n||0;this.w=r||1;this.TOLERANCE=1e-5};e.prototype.normalize=function(){var e=this.w*this.w+this.x*this.x+this.y*this.y+this.z*this.z;if(Math.abs(e)>this.TOLERANCE&&Math.abs(e-1)>this.TOLERANCE){var t=Math.sqrt(e);this.x/=t;this.y/=t;this.z/=t;this.w/=t}return this};e.prototype.getConjugate=function(){return new css3d.quaternion(-this.x,-this.y,-this.z,this.w)};e.prototype.multiply=function(e){return new css3d.quaternion(this.w*e.x+this.x*e.w+this.y*e.z-this.z*e.y,this.w*e.y+this.y*e.w+this.z*e.x-this.x*e.z,this.w*e.z+this.z*e.w+this.x*e.y-this.y*e.x,this.w*e.w-this.x*e.x-this.y*e.y-this.z*e.z)};e.prototype.multiplyVector=function(e){var t=new css3d.vector3(e.x,e.y,e.z);t.normalize();var n=new css3d.quaternion;n.x=t.x;n.y=t.y;n.z=t.z;n.w=0;var r=n.multiply(this.getConjugate());r=this.multiply(r);return new css3d.vector3(r.x,r.y,r.z)};e.prototype.fromAxisAngle=function(e,t){t*=.5;var n=Math.sin(t);return new css3d.quaternion(e.x*n,e.y*n,e.z*n,Math.cos(t))};e.prototype.fromXYZ=function(e,t,n){e*=.5;t*=.5;n*=.5;var r=Math.sin(t);var i=Math.sin(n);var s=Math.sin(e);var o=Math.cos(t);var u=Math.cos(n);var a=Math.cos(e);return(new css3d.quaternion(s*o*u-a*r*i,a*r*u+s*o*i,a*o*i-s*r*u,a*o*u+s*r*i)).normalize()};e.prototype.fromMatrix4=function(e){var t=e[0]+e[5]+e[10];var n=new css3d.quaternion;if(t>0){var r=Math.sqrt(t+1)*2;n.w=.25*r;n.x=(e[9]-e[6])/r;n.y=(e[2]-e[8])/r;n.z=(e[4]-e[1])/r}else if(e[0]>e[5]&e[0]>e[10]){var r=Math.sqrt(1+e[0]-e[5]-e[10])*2;n.w=(e[9]-e[6])/r;n.x=.25*r;n.y=(e[1]+e[4])/r;n.z=(e[2]+e[8])/r}else if(e[5]>e[10]){var r=Math.sqrt(1+e[5]-e[0]-e[10])*2;n.w=(e[2]-e[8])/r;n.x=(e[1]+e[4])/r;n.y=.25*r;n.z=(e[6]+e[9])/r}else{var r=Math.sqrt(1+e[10]-e[0]-e[5])*2;n.w=(e[4]-e[1])/r;n.x=(e[2]+e[8])/r;n.y=(e[6]+e[9])/r;n.z=.25*r}return n};e.prototype.toMatrix4=function(){var e=this.x*this.x;var t=this.y*this.y;var n=this.z*this.z;var r=this.x*this.y;var i=this.x*this.z;var s=this.y*this.z;var o=this.w*this.x;var u=this.w*this.y;var a=this.w*this.z;return[1-2*(t+n),2*(r-a),2*(i+u),0,2*(r+a),1-2*(e+n),2*(s-o),0,2*(i-u),2*(s+o),1-2*(e+t),0,0,0,0,1]};e.prototype.right=function(){return new css3d.vector3(1-2*(this.y*this.y+this.z*this.z),2*(this.x*this.y+this.w*this.z),2*(this.x*this.z-this.w*this.y))};e.prototype.up=function(){return new css3d.vector3(2*(this.x*this.y-this.w*this.z),1-2*(this.x*this.x+this.z*this.z),2*(this.y*this.z+this.w*this.x))};e.prototype.forward=function(){return new css3d.vector3(2*(this.x*this.z+this.w*this.y),2*(this.y*this.x-this.w*this.x),1-2*(this.x*this.x+this.y*this.y))};e.prototype.slerp=function(e,t,n){var r=new css3d.quaternion;var i=e.w*t.w+e.x*t.x+e.y*t.y+e.z*t.z;if(i<0){t.w=-t.w;t.x=-t.x;t.y=-t.y;t.z=t.z;i=-i}if(Math.abs(i)>=1){r.w=e.w;r.x=e.x;r.y=e.y;r.z=e.z;return r}var s=Math.acos(i);var o=Math.sqrt(1-i*i);if(Math.abs(o)<.001){r.w=e.w*.5+t.w*.5;r.x=e.x*.5+t.x*.5;r.y=e.y*.5+t.y*.5;r.z=e.z*.5+t.z*.5;return r}var u=Math.sin((1-n)*s)/o;var a=Math.sin(n*s)/o;r.w=e.w*u+t.w*a;r.x=e.x*u+t.x*a;r.y=e.y*u+t.y*a;r.z=e.z*u+t.z*a;return r};e.prototype.toAxisAngle=function(){if(this.w>1)this.normalize();var e=2*Math.acos(this.w);var t=Math.sqrt(1-this.w*this.w);var n=new css3d.vector3;if(t<.001){n.x=this.x;n.y=this.y;n.z=this.z}else{n.x=this.x/t;n.y=this.y/t;n.z=this.z/t}return{axis:n,angle:e}};return e}();css3d.scene=function(){var e=function(){this._elements=[];this._camera=new css3d.camera;this._light=(new css3d.vector3(0,0,-1)).normalize();this._shadingIntensity=.7;this.depthCueing=true};e.prototype.getElements=function(){return this._elements};e.prototype.addElement=function(e){this._elements.push(e);return this};e.prototype.getElementById=function(e){for(var t=0;t<this._elements.length;t++){if(null!=this._elements[t]._domElement&&this._elements[t]._domElement.id==e){return this._elements[t]}}return null};e.prototype.getCamera=function(){return this._camera};e.prototype.getLight=function(){return this._light};e.prototype.getShadingIntensity=function(){return this._shadingIntensity};e.prototype.update=function(){var e=this._elements;for(var t=0;t<e.length;t++){e[t].update()}this._camera.update();return this};return e}();css3d.vector3=function(e){var t=function(e,t,n){this.x=e||0;this.y=t||0;this.z=n||0};t.prototype.set=function(e,t,n){this.x=e||0;this.y=t||0;this.z=n||0;return this};t.prototype.magnitude=function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z)};t.prototype.normalize=function(){var e=this.magnitude();if(e!==0){this.x/=e;this.y/=e;this.z/=e}return this};t.prototype.dot=function(e){return this.x*e.x+this.y*e.y+this.z*e.z};t.prototype.dot2=function(e,t){return e.x*t.x+e.y*t.y+e.z*t.z};t.prototype.cross=function(t,n){var r=new e.vector3(t.y*n.z-t.z*n.y,t.z*n.x-t.x*n.z,t.x*n.y-t.y*n.x);return r};t.prototype.sub=function(e){this.x-=e.x;this.y-=e.y;this.z-=e.z;return this};t.prototype.sub2=function(t,n){var r=new e.vector3(t.x-n.x,t.y-n.y,t.z-n.z);return r};t.prototype.transform=function(t){return new e.vector4(this.x*t[0]+this.y*t[1]+this.z*t[2]+t[3],this.x*t[4]+this.y*t[5]+this.z*t[6]+t[7],this.x*t[8]+this.y*t[9]+this.z*t[10]+t[11],this.x*t[12]+this.y*t[13]+this.z*t[14]+t[15])};t.prototype.clone=function(){return new e.vector3(this.x,this.y,this.z)};t.prototype.toString=function(){return this.x.toFixed(2)+","+this.y.toFixed(2)+","+this.z.toFixed(2)};t.prototype.isZero=function(){return this.x==0&&this.y==0&&this.z==0};return t}(css3d);css3d.vector4=function(){var e=function(e,t,n,r){this.x=e||0;this.y=t||0;this.z=n||0;this.w=r||1};e.prototype.homogenize=function(){if(this.w!==1){this.x/=this.w;this.y/=this.w;this.z/=this.w;this.w=1}return this};e.prototype.magnitude=function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)};e.prototype.normalize=function(){var e=this.magnitude();if(e!==0){this.x/=e;this.y/=e;this.z/=e;this.w/=e}return this};e.prototype.dot=function(e){return this.x*e.x+this.y*e.y+this.z*e.z+(this.w+e.w)};e.prototype.cross=function(e,t){var e=(new css3d.vector4(e.x,e.y,e.z,e.w)).homogenize();var t=(new css3d.vector4(t.x,t.y,t.z,t.w)).homogenize();var n=new css3d.vector4(e.y*t.z-e.z*t.y,e.z*t.x-e.x*t.z,e.x*t.y-e.y*t.x,1);n.normalize();return n};e.prototype.transform=function(e){return new css3d.vector4(this.x*e[0]+this.y*e[1]+this.z*e[2]+this.w*e[3],this.x*e[4]+this.y*e[5]+this.z*e[6]+this.w*e[7],this.x*e[8]+this.y*e[9]+this.z*e[10]+this.w*e[11],this.x*e[12]+this.y*e[13]+this.z*e[14]+this.w*e[15])};e.prototype.toVector3=function(){return new css3d.vector3(this.x,this.y,this.z)};return e}()
\ No newline at end of file
+var css3d=function(e){var t=function(e,t){this._containerElement=e;this._prefix=null;this._styleTransform=null;this._styleBackfaceVisibility=null;this._styleFilter=null;this._styleTransformStyle=null;this._stylePerspective=null;this._needDepthSorting=false;this._hasFilter=true;this._scene=t;this._viewMatrix=null;this._isRendering=false;this._renderId=null;this._lastCalledTime=0;this.version="0.9";this.browserSupports3d=this._init();this.onRender=null};t.prototype._init=function(){if(!this._browserSupports3d()){return false}this._prefix=this._getPrefix();if(null==this._prefix){return false}this._initContainer();this._getNeedDepthSorting();this._getHasFilter();this._initElements();return true};t.prototype._browserSupports3d=function(){if(!window.getComputedStyle){return false}var t=e.createElement("p"),n,r={webkitTransform:"-webkit-transform",oTransform:"-o-transform",msTransform:"-ms-transform",mozTransform:"-moz-transform",transform:"transform"};e.body.insertBefore(t,null);for(var i in r){if(t.style[i]!==undefined){t.style[i]="translate3d(1px,1px,1px)";n=window.getComputedStyle(t).getPropertyValue(r[i])}}e.body.removeChild(t);return n!==undefined&&n.length>0&&n!=="none"};t.prototype._getPrefix=function(){var e=["transform","msTransform","mozTransform","webkitTransform","oTransform"];var t=["","ms","moz","webkit","o"];var n=null;for(var r=0;r<e.length;++r){if(typeof this._containerElement.style[e[r]]!="undefined"){n=t[r];break}}if(null!=n){this._styleTransform=n==""?"transform":n+"Transform";this._styleBackfaceVisibility=n==""?"backfaceVisibility":n+"BackfaceVisibility";this._styleFilter=n==""?"filter":n+"Filter";this._styleTransformStyle=n==""?"transformStyle":n+"TransformStyle";this._stylePerspective=n==""?"perspective":n+"Perspective"}return n};t.prototype._initContainer=function(){this._containerElement.style[this._styleTransformStyle]="preserve-3d";if(null!=this._scene){this._containerElement.style[this._stylePerspective]=this._scene.getCamera().perspective+"px"}};t.prototype._initElements=function(){if(null!=this._scene){var e=this._scene.getElements();for(var t=0;t<e.length;t++){e[t].init(this._hasFilter,this._containerElement)}}};t.prototype._getNeedDepthSorting=function(){var e=window.getComputedStyle(this._containerElement,null),t=e.getPropertyValue("-webkit-transform-style")||e.getPropertyValue("-moz-transform-style")||e.getPropertyValue("-ms-transform-style")||e.getPropertyValue("-o-transform-style")||e.getPropertyValue("transform-style");if(t!=="preserve-3d"){this._needDepthSorting=true}};t.prototype._getHasFilter=function(){this._containerElement.style[this._styleFilter]="brightness(1)";var e=window.getComputedStyle(this._containerElement,null),t=e.getPropertyValue("-webkit-filter")||e.getPropertyValue("-moz-filter")||e.getPropertyValue("-ms-filter")||e.getPropertyValue("-o-filter")||e.getPropertyValue("filter");this._containerElement.style[this._styleFilter]="none";if(t!=="brightness(1)"){this._hasFilter=false;return false}return true};t.prototype.setScene=function(e){this._scene=e;this._initElements();this._initContainer();return this};t.prototype.getScene=function(){return this._scene};t.prototype._zSortElements=function(){var e,n,r;var i=this._scene.getElements();for(var s=0;s<i.length;s++){if(null==i[s].getDomElement()){continue}if(null!=i[s].zIndex){i[s].getDomElement().style.zIndex=i[s].zIndex;continue}e=i[s].getWorldMatrix();n=t.matrix4.multiply(this._viewMatrix,e);r=i[s].getPivot().transform(n);i[s].worldView=n;i[s].getDomElement().style.zIndex=Math.round(r.z*10)}};t.prototype.update=function(){this._scene.update();return this};t.prototype.render=function(){this._viewMatrix=this._scene.getCamera().getViewMatrix();if(this._needDepthSorting){this._zSortElements()}var e=this._scene.getElements();for(var t=0;t<e.length;t++){this.renderElement(e[t])}return this};t.prototype.renderElement=function(e){if(null==e.getDomElement()){return this}var n;if(null!=e.worldView){n=e.worldView}else{n=t.matrix4.multiply(this._viewMatrix,e.getWorldMatrix())}var r="matrix3d(";r+=n[0].toFixed(10)+","+n[4].toFixed(10)+","+n[8].toFixed(10)+","+n[12].toFixed(10)+",";r+=n[1].toFixed(10)+","+n[5].toFixed(10)+","+n[9].toFixed(10)+","+n[13].toFixed(10)+",";r+=n[2].toFixed(10)+","+n[6].toFixed(10)+","+n[10].toFixed(10)+","+n[14].toFixed(10)+",";r+=n[3].toFixed(10)+","+n[7].toFixed(10)+","+n[11].toFixed(10)+","+n[15].toFixed(10);r+=")";e.getDomElement().style[this._styleTransform]=r;if(e.backfaceCullingDirty){var i="visible";if(e.getBackfaceCulling()){i="hidden"}e.getDomElement().style[this._styleBackfaceVisibility]=i;e.backfaceCullingDirty=false}if(e.shading){var s=e.normal.transform(e.getTotalRotation());s=s.toVector3().normalize();var o=Math.abs(s.dot(this._scene.getLight())).toFixed(10);o=o*this._scene.getShadingIntensity()+(1-this._scene.getShadingIntensity());if(this._hasFilter){e.getDomElement().style[this._styleFilter]="brightness("+o+")"}else if(null!=e.getShaderElement()){e.getShaderElement().style.opacity=1-o}}return this};t.prototype._requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return window.setTimeout(e,1e3/60)}};t.prototype._cancelAnimationFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||window.clearTimeout};t.prototype.startRender=function(){if(!this._isRendering){this._isRendering=true;window.requestAnimationFrame=this._requestAnimationFrame();this._renderLoop()}return this};t.prototype.stopRender=function(){if(this._isRendering){window.cancelAnimationFrame=this._cancelAnimationFrame();cancelAnimationFrame(this._renderId);this._isRendering=false;this._lastCalledTime=0}return this};t.prototype._renderLoop=function(){var e=(new Date).getTime();if(!this._lastCalledTime){this._lastCalledTime=e}var n=.06*(e-this._lastCalledTime);this._lastCalledTime=e;this.update().render();var r=this;this._renderId=requestAnimationFrame(function(){t.prototype._renderLoop.call(r)});if(null!=this.onRender){this.onRender(n)}};return t}(document);css3d.ajax=function(){var e={};var t={};e.x=function(){try{return new XMLHttpRequest}catch(e){try{return new ActiveXObject("Msxml2.XMLHTTP")}catch(e){try{return new ActiveXObject("Microsoft.XMLHTTP")}catch(e){return false}}}return false};e.statechange=function(e){if(e.xmlHttp.readyState==4){if(e.responsefnc!=null){e.responsefnc(e.xmlHttp.responseText)}}return};e.active=function(e){switch(e.xmlHttp.readyState){case 1:case 2:case 3:return true;break;default:return false;break}};t.send=function(t,n,r,i,s,o){var u=e.x();if(!u){throw new Error("No ajax support")}var s=s||5e3;var a=function(){throw new Error("Ajax error")};if(!o){var f=new Date;var l=f.getTime();if(r=="GET"){t=t+"&__t__="+l}else if(r=="POST"){i=i+"&__t__="+l}}var c={};c.xmlHttp=u;c.responsefnc=n;c.errorfnc=a;u.onreadystatechange=function(){e.statechange(c)};u.open(r,t,true);if(r=="POST"){u.setRequestHeader("Content-Type","application/x-www-form-urlencoded")}u.send(i);c.timeout=window.setTimeout(function(){if(e.active(c)){c.xmlHttp.abort();throw new Error("Ajax timeout");return}},s)};t.get=function(e,n,r){t.send(e,n,"GET",null,r)};t.getS=function(t){var n=e.x();if(!n){throw new Error("No ajax support")}n.open("GET",t,false);n.send(null);return n.responseText};t.post=function(e,n,r,i){t.send(e,n,"POST",r,i)};t.postS=function(t,n){var r=e.x();if(!r){throw new Error("No ajax support")}r.open("POST",t,false);r.setRequestHeader("Content-Type","application/x-www-form-urlencoded");r.send(n);return r.responseText};return t}();css3d.camera=function(){var e=function(e,t,n,r){this.perspective=r||800;e=null!=e?e:0;t=null!=t?t:0;n=null!=n?n:this.perspective;this._view=css3d.matrix4.identity();this._rotation=css3d.matrix4.identity();this._translation=new css3d.vector3(e,t,n);this._isDirty=true};e.prototype._calcFov=function(e,t){return 360*Math.atan(t/(2*e))/Math.PI};e.prototype.setRotation=function(e,t){this._rotation=css3d.matrix4.rotationAxis(e,t);this._isDirty=true;return this};e.prototype.setRotationXYZ=function(e,t,n){e=e||0;t=t||0;n=n||0;var r=null;r=css3d.matrix4.rotationZ(n);r=css3d.matrix4.multiply(r,css3d.matrix4.rotationY(t));r=css3d.matrix4.multiply(r,css3d.matrix4.rotationX(e));this._rotation=r;this._isDirty=true;return this};e.prototype.setRotationMatrix=function(e){this._rotation=e;this._isDirty=true;return this};e.prototype.getRotation=function(){return this._rotation};e.prototype.setTranslation=function(e,t,n){this._translation.x=e;this._translation.y=t;this._translation.z=n;this._isDirty=true;return this};e.prototype.getTranslation=function(){return this._translation};e.prototype.backVector=function(){return css3d.matrix4.back(this._rotation).normalize()};e.prototype.forward=function(e){var t=this.backVector();this.setTranslation(this._translation.x-t.x*e,this._translation.y-t.y*e,this._translation.z-t.z*e);return this};e.prototype.rightVector=function(){return css3d.matrix4.right(this._rotation).normalize()};e.prototype.left=function(e){var t=this.rightVector();this.setTranslation(this._translation.x-t.x*e,this._translation.y-t.y*e,this._translation.z-t.z*e);return this};e.prototype.upVector=function(){return css3d.matrix4.up(this._rotation).normalize()};e.prototype.up=function(e){var t=this.upVector();this.setTranslation(this._translation.x+t.x*e,this._translation.y+t.y*e,this._translation.z+t.z*e);return this};e.prototype.getViewMatrix=function(){return this._view};e.prototype.setViewMatrix=function(e){this._rotation=[e[0],e[1],e[2],0,e[4],e[5],e[6],0,e[8],e[9],e[10],0,0,0,0,1];this.setTranslation(e[3],e[7],e[11]);this._isDirty=true;return this};e.prototype.getFaceElementMatrix=function(e,t){t=null==t?this.perspective:t;var n=e.getPivotTransformed();var r=e.getTotalRotation();var i=e.backVector();var s=n.x+i.x*t;var o=n.y+i.y*t;var u=n.z+i.z*t;r[3]=s;r[7]=o;r[11]=u;return r};e.prototype.getFaceElementLerpFunction=function(e,t){var n=this.getFaceElementMatrix(e,t);var r=this.getTranslation().clone();var i=new css3d.vector3(n[3],n[7],n[11]);n[3]=0;n[7]=0;n[11]=0;var s=this.getRotation();var o=css3d.quaternion.prototype.fromMatrix4(n);var u=this;return function(e){u.lerp(r,i,s,o,e)}};e.prototype.lerpTranslation=function(e,t,n){this.setTranslation(css3d.math.lerp(e.x,t.x,n),css3d.math.lerp(e.y,t.y,n),css3d.math.lerp(e.z,t.z,n));return this};e.prototype.lerpRotation=function(e,t,n){var r=css3d.quaternion.prototype.fromMatrix4(e);var i=css3d.quaternion.prototype.slerp(r,t,n);this.setRotationMatrix(i.toMatrix4());return this};e.prototype.lerp=function(e,t,n,r,i){if(i==null){return this}if(e&&t){this.lerpTranslation(e,t,i)}if(n&&r){this.lerpRotation(n,r,i)}return this};e.prototype.lookAtElement=function(e){var t=css3d.matrix4.lookAt(this.getTranslation(),e.getTranslation(),new css3d.vector3(0,-1,0));this.setRotationMatrix(t);return this};e.prototype.update=function(){if(this._isDirty){var e=this._rotation;var t=this.backVector();e[3]=this._translation.x-t.x*this.perspective;e[7]=this._translation.y-t.y*this.perspective;e[11]=this._translation.z-t.z*this.perspective;this._view=css3d.matrix4.fastInverse(e);this._isDirty=false}return this};return e}();css3d.element=function(){var e=function(e){this._domElement=e;this._pivot=new css3d.vector3(0,0,0);this._world=css3d.matrix4.identity();this._scale=new css3d.vector3(1,1,1);this._rotation=css3d.matrix4.identity();this._translation=new css3d.vector3;this._parent=null;this._children=[];this._shaderElement=null;this._backfaceCulling=false;this._backfaceCullingOld=null;this._isDirty=true;this._isScaled=false;this._isRotated=false;this._isTranslated=false;this._isPivotChanged=false;this.shading=true;this.backfaceCullingDirty=false;this.worldView=null;this.normal=new css3d.vector3(0,0,1);this.inheritScaling=false;this.autoCenter=true;this.zIndex=null};e.prototype.init=function(e,t){if(!e){this._createShaderElement()}if(null!=this._domElement&&this.autoCenter){var n=t.offsetWidth;var r=t.offsetHeight;var i=this._domElement.offsetWidth;var s=this._domElement.offsetHeight;this._domElement.style.position="absolute";this._domElement.style.left=(n-i)/2+"px";this._domElement.style.top=(r-s)/2+"px"}return this};e.prototype._createShaderElement=function(){if(null==this._domElement){return}var e=document.createElement("div");e.style.position="absolute";e.style.top="0";e.style.left="0";e.style.width="100%";e.style.height="100%";e.style.backgroundColor="#000000";e.style.opacity=0;e.style.pointerEvents="none";e.className="css3d-shader";this._domElement.appendChild(e);this._shaderElement=e};e.prototype.getDomElement=function(){return this._domElement};e.prototype.getShaderElement=function(){return this._shaderElement};e.prototype.setParent=function(e){this._parent=e;e.addChild(this);return this};e.prototype.addChild=function(e){this._children.push(e);e._parent=this;return this};e.prototype.getChildren=function(){return this._children};e.prototype.setChildrenDirty=function(){for(var e=0;e<this._children.length;e++){this._children[e]._isDirty=true}return this};e.prototype.setBackfaceCulling=function(e){this._backfaceCulling=e;if(e!=this._backfaceCullingOld){this.backfaceCullingDirty=true;this._backfaceCullingOld=e}return this};e.prototype.getBackfaceCulling=function(){return this._backfaceCulling};e.prototype.getWorldMatrix=function(){return this._world};e.prototype.setPivot=function(e,t,n){this._pivot.x=e;this._pivot.y=t;this._pivot.z=n;if(!this._pivot.isZero()){this._isPivotChanged=true}else{this._isPivotChanged=false}return this};e.prototype.getPivot=function(){return this._pivot};e.prototype.getPivotTransformed=function(){var e=this.getPivot().transform(this._world).toVector3();return e};e.prototype.setScale=function(e,t,n){this._scale.x=e;this._scale.y=t;this._scale.z=n;this._isDirty=true;this._isScaled=e==1&&t==1&&n==1?false:true;this.setChildrenDirty();return this};e.prototype.getScale=function(){return this._scale};e.prototype.setRotation=function(e,t){this._isRotated=t==0?false:true;if(this._isRotated){this._rotation=css3d.matrix4.rotationAxis(e,t)}else{this._rotation=css3d.matrix4.identity()}this._isDirty=true;this.setChildrenDirty();return this};e.prototype.setRotationXYZ=function(e,t,n){e=e||0;t=t||0;n=n||0;this._isRotated=e==0&&t==0&&n==0?false:true;var r=null;if(this._isRotated){r=css3d.matrix4.rotationZ(n);r=css3d.matrix4.multiply(r,css3d.matrix4.rotationY(t));r=css3d.matrix4.multiply(r,css3d.matrix4.rotationX(e))}else{r=css3d.matrix4.identity()}this._rotation=r;this._isDirty=true;this.setChildrenDirty();return this};e.prototype.setRotationMatrix=function(e){this._rotation=e;this._isDirty=true;this.setChildrenDirty();this._isRotated=true;return this};e.prototype.getRotation=function(){return this._rotation};e.prototype.getTotalRotation=function(){var e=this._rotation;if(null!=this._parent){e=css3d.matrix4.multiply(this._parent.getTotalRotation(),e)}return e};e.prototype.setTranslation=function(e,t,n){this._translation.x=e;this._translation.y=t;this._translation.z=n;this._isDirty=true;this.setChildrenDirty();this._isTranslated=e==0&&t==0&&n==0?false:true;return this};e.prototype.getTranslation=function(){return this._translation};e.prototype.backVector=function(){return css3d.matrix4.back(this._world).normalize()};e.prototype.forward=function(e){var t=this.backVector();this.setTranslation(this._translation.x-t.x*e,this._translation.y-t.y*e,this._translation.z-t.z*e);return this};e.prototype.rightVector=function(){return css3d.matrix4.right(this._world).normalize()};e.prototype.left=function(e){var t=this.rightVector();this.setTranslation(this._translation.x-t.x*e,this._translation.y-t.y*e,this._translation.z-t.z*e);return this};e.prototype.upVector=function(){return css3d.matrix4.up(this._world).normalize()};e.prototype.up=function(e){var t=this.upVector();this.setTranslation(this._translation.x+t.x*e,this._translation.y+t.y*e,this._translation.z+t.z*e);return this};e.prototype.setMatrix=function(e,t){if(null==this._domElement){return this}var n=css3d.matrix4.translation(this._translation.x,this._translation.y,this._translation.z);n=css3d.matrix4.multiply(n,css3d.matrix4.scale(this._scale.x,this._scale.y,this._scale.z));n=css3d.matrix4.multiply(n,this._rotation);var r="matrix3d(";r+=n[0].toFixed(10)+","+n[4].toFixed(10)+","+n[8].toFixed(10)+","+n[12].toFixed(10)+",";r+=n[1].toFixed(10)+","+n[5].toFixed(10)+","+n[9].toFixed(10)+","+n[13].toFixed(10)+",";r+=n[2].toFixed(10)+","+n[6].toFixed(10)+","+n[10].toFixed(10)+","+n[14].toFixed(10)+",";r+=n[3].toFixed(10)+","+n[7].toFixed(10)+","+n[11].toFixed(10)+","+n[15].toFixed(10);r+=")";this._domElement.style[e]=r;var i="visible";if(this.getBackfaceCulling()){i="hidden"}this._domElement.style[t]=i;return this};e.prototype.lerpScale=function(e,t,n){this.setScale(css3d.math.lerp(e.x,t.x,n),css3d.math.lerp(e.y,t.y,n),css3d.math.lerp(e.z,t.z,n));return this};e.prototype.lerpTranslation=function(e,t,n){this.setTranslation(css3d.math.lerp(e.x,t.x,n),css3d.math.lerp(e.y,t.y,n),css3d.math.lerp(e.z,t.z,n));return this};e.prototype.lerpRotation=function(e,t,n){var r=css3d.quaternion.prototype.fromMatrix4(e);var i=css3d.quaternion.prototype.slerp(r,t,n);this.setRotationMatrix(i.toMatrix4());return this};e.prototype.lerp=function(e,t,n,r,i,s,o){if(o==null){return this}if(e&&t){this.lerpScale(e,t,o)}if(n&&r){this.lerpTranslation(n,r,o)}if(i&&s){this.lerpRotation(i,s,o)}return this};e.prototype.getLerpFunction=function(e,t,n){var r=this.getScale().clone();var i=this.getTranslation().clone();var s=this.getRotation();var o=this;return function(u){o.lerp(r,e,i,t,s,n,u)}};e.prototype.update=function(){if(this._isDirty){this._world=css3d.matrix4.translation(this._translation.x,this._translation.y,this._translation.z);if(this._isScaled){this._world=css3d.matrix4.multiply(this._world,css3d.matrix4.scale(this._scale.x,this._scale.y,this._scale.z))}if(this._isRotated){if(this._isPivotChanged){this._world=css3d.matrix4.multiply(this._world,css3d.matrix4.translation(this._pivot.x,this._pivot.y,this._pivot.z))}this._world=css3d.matrix4.multiply(this._world,this._rotation);if(this._isPivotChanged){this._world=css3d.matrix4.multiply(this._world,css3d.matrix4.translation(-this._pivot.x,-this._pivot.y,-this._pivot.z))}}if(null!=this._parent){if(!this.inheritScaling){if(this._parent._isScaled){this._world=css3d.matrix4.multiply(css3d.matrix4.scale(1/this._parent.getScale().x,1/this._parent.getScale().y,1/this._parent.getScale().z),this._world)}}this._parent.update();this._world=css3d.matrix4.multiply(this._parent.getWorldMatrix(),this._world)}this._isDirty=false}return this};return e}();css3d.elementFactory={cube:function(e,t,n,r,i,s,o){var u=n/2;var a=new css3d.element;a.setTranslation(0,0,-u);var f=document.createElement("div");f.style.position="absolute";f.style.width=n+"px";f.style.height=n+"px";e.appendChild(f);var l=document.createElement("div");l.style.position="absolute";l.style.width=n+"px";l.style.height=n+"px";e.appendChild(l);var c=document.createElement("div");c.style.position="absolute";c.style.width=n+"px";c.style.height=n+"px";e.appendChild(c);var h=document.createElement("div");h.style.position="absolute";h.style.width=n+"px";h.style.height=n+"px";e.appendChild(h);var p=document.createElement("div");p.style.position="absolute";p.style.width=n+"px";p.style.height=n+"px";e.appendChild(p);var d=document.createElement("div");d.style.position="absolute";d.style.width=n+"px";d.style.height=n+"px";e.appendChild(d);if(r){f.id=r+"-back";l.id=r+"-front";c.id=r+"-left";h.id=r+"-right";p.id=r+"-top";d.id=r+"-bottom"}if(i){f.className=i+" "+i+"-back";l.className=i+" "+i+"-front";c.className=i+" "+i+"-left";h.className=i+" "+i+"-right";p.className=i+" "+i+"-top";d.className=i+" "+i+"-bottom"}s=s==null?true:s;o=o==null?true:o;var v=new css3d.element(f);v.setBackfaceCulling(s);v.shading=o;v.setTranslation(0,0,-u);v.setRotation({x:0,y:1,z:0},Math.PI);v.inheritScaling=true;var m=new css3d.element(l);m.setBackfaceCulling(s);m.shading=o;m.setTranslation(0,0,u);m.inheritScaling=true;var g=new css3d.element(c);g.setBackfaceCulling(s);g.shading=o;g.setRotation({x:0,y:1,z:0},-Math.PI/2);g.setTranslation(-u,0,0);g.inheritScaling=true;var y=new css3d.element(h);y.setBackfaceCulling(s);y.shading=o;y.setRotation({x:0,y:1,z:0},Math.PI/2);y.setTranslation(u,0,0);y.inheritScaling=true;var b=new css3d.element(p);b.setBackfaceCulling(s);b.shading=o;b.setRotation({x:1,y:0,z:0},Math.PI/2);b.setTranslation(0,-u,0);b.inheritScaling=true;var w=new css3d.element(d);w.setBackfaceCulling(s);w.shading=o;w.setRotation({x:1,y:0,z:0},-Math.PI/2);w.setTranslation(0,u,0);w.inheritScaling=true;v.setParent(a);m.setParent(a);g.setParent(a);y.setParent(a);b.setParent(a);w.setParent(a);t.addElement(a);t.addElement(v);t.addElement(m);t.addElement(g);t.addElement(y);t.addElement(b);t.addElement(w);return a},cuboid:function(e,t,n,r,i,s,o,u,a,f){var l=n/2;var c=r/2;var h=i/2;f=f==null?true:f;var p=new css3d.element;p.setTranslation(0,0,-h);var d=document.createElement("div");d.style.position="absolute";d.style.width=n+"px";d.style.height=r+"px";e.appendChild(d);var v=document.createElement("div");v.style.position="absolute";v.style.width=n+"px";v.style.height=r+"px";e.appendChild(v);var m=document.createElement("div");m.style.position="absolute";m.style.width=i+"px";m.style.height=r+"px";e.appendChild(m);var g=document.createElement("div");g.style.position="absolute";g.style.width=i+"px";g.style.height=r+"px";e.appendChild(g);if(f){var y=document.createElement("div");y.style.position="absolute";y.style.width=n+"px";y.style.height=i+"px";e.appendChild(y);var b=document.createElement("div");b.style.position="absolute";b.style.width=n+"px";b.style.height=i+"px";e.appendChild(b)}if(s){d.id=s+"-back";v.id=s+"-front";m.id=s+"-left";g.id=s+"-right";if(f){y.id=s+"-top";b.id=s+"-bottom"}}if(o){d.className=o+" "+o+"-back";v.className=o+" "+o+"-front";m.className=o+" "+o+"-left";g.className=o+" "+o+"-right";if(f){y.className=o+" "+o+"-top";b.className=o+" "+o+"-bottom"}}u=u==null?true:u;a=a==null?true:a;var w=new css3d.element(d);w.setBackfaceCulling(u);w.shading=a;w.setTranslation(0,0,-h);w.setRotation({x:0,y:1,z:0},Math.PI);w.inheritScaling=true;var E=new css3d.element(v);E.setBackfaceCulling(u);E.shading=a;E.setTranslation(0,0,h);E.inheritScaling=true;var S=new css3d.element(m);S.setBackfaceCulling(u);S.shading=a;S.setRotation({x:0,y:1,z:0},-Math.PI/2);S.setTranslation(-l,0,0);S.inheritScaling=true;var x=new css3d.element(g);x.setBackfaceCulling(u);x.shading=a;x.setRotation({x:0,y:1,z:0},Math.PI/2);x.setTranslation(l,0,0);x.inheritScaling=true;if(f){var T=new css3d.element(y);T.setBackfaceCulling(u);T.shading=a;T.setRotation({x:1,y:0,z:0},Math.PI/2);T.setTranslation(0,-c,0);T.inheritScaling=true;var N=new css3d.element(b);N.setBackfaceCulling(u);N.shading=a;N.setRotation({x:1,y:0,z:0},-Math.PI/2);N.setTranslation(0,c,0);N.inheritScaling=true}w.setParent(p);E.setParent(p);S.setParent(p);x.setParent(p);if(f){T.setParent(p);N.setParent(p)}t.addElement(p);t.addElement(w);t.addElement(E);t.addElement(S);t.addElement(x);if(f){t.addElement(T);t.addElement(N)}return p},cubeElements:function(e,t,n,r,i,s,o,u,a,f){var l=t/2;var c=new css3d.element;c.setTranslation(0,0,-l);n.style.position="absolute";r.style.position="absolute";i.style.position="absolute";s.style.position="absolute";o.style.position="absolute";u.style.position="absolute";a=a==null?true:a;f=f==null?true:f;var h=new css3d.element(n);h.setBackfaceCulling(a);h.shading=f;h.setTranslation(0,0,-l);h.setRotation({x:0,y:1,z:0},Math.PI);h.inheritScaling=true;var p=new css3d.element(r);p.setBackfaceCulling(a);p.shading=f;p.setTranslation(0,0,l);p.inheritScaling=true;var d=new css3d.element(i);d.setBackfaceCulling(a);d.shading=f;d.setRotation({x:0,y:1,z:0},-Math.PI/2);d.setTranslation(-l,0,0);d.inheritScaling=true;var v=new css3d.element(s);v.setBackfaceCulling(a);v.shading=f;v.setRotation({x:0,y:1,z:0},Math.PI/2);v.setTranslation(l,0,0);v.inheritScaling=true;var m=new css3d.element(o);m.setBackfaceCulling(a);m.shading=f;m.setRotation({x:1,y:0,z:0},Math.PI/2);m.setTranslation(0,-l,0);m.inheritScaling=true;var g=new css3d.element(u);g.setBackfaceCulling(a);g.shading=f;g.setRotation({x:1,y:0,z:0},-Math.PI/2);g.setTranslation(0,l,0);g.inheritScaling=true;h.setParent(c);p.setParent(c);d.setParent(c);v.setParent(c);m.setParent(c);g.setParent(c);e.addElement(c);e.addElement(h);e.addElement(p);e.addElement(d);e.addElement(v);e.addElement(m);e.addElement(g);return c},cube2:function(e,t,n,r,i,s){var o=r/2;var u=document.createElement("div");u.style.position="absolute";u.style[t._styleTransformStyle]="preserve-3d";e.appendChild(u);var a=document.createElement("div");a.style.position="absolute";u.appendChild(a);var f=document.createElement("div");f.style.position="absolute";u.appendChild(f);var l=document.createElement("div");l.style.position="absolute";u.appendChild(l);var c=document.createElement("div");c.style.position="absolute";u.appendChild(c);var h=document.createElement("div");h.style.position="absolute";u.appendChild(h);var p=document.createElement("div");p.style.position="absolute";u.appendChild(p);if(i){u.id=i+"-main";a.id=i+"-back";f.id=i+"-front";l.id=i+"-left";c.id=i+"-right";h.id=i+"-top";p.id=i+"-bottom"}if(s){u.className=s+" "+s+"-main";a.className=s+" "+s+"-back";f.className=s+" "+s+"-front";l.className=s+" "+s+"-left";c.className=s+" "+s+"-right";h.className=s+" "+s+"-top";p.className=s+" "+s+"-bottom"}var d=new css3d.element(u);d.setTranslation(0,0,-o);d.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var v=new css3d.element(a);v.setBackfaceCulling(true);v.setTranslation(0,0,-o);v.setRotation({x:0,y:1,z:0},Math.PI);v.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var m=new css3d.element(f);m.setBackfaceCulling(true);m.setTranslation(0,0,o);m.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var g=new css3d.element(l);g.setBackfaceCulling(true);g.setRotation({x:0,y:1,z:0},-Math.PI/2);g.setTranslation(-o,0,0);g.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var y=new css3d.element(c);y.setBackfaceCulling(true);y.setRotation({x:0,y:1,z:0},Math.PI/2);y.setTranslation(o,0,0);y.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var b=new css3d.element(h);b.setBackfaceCulling(true);b.setRotation({x:1,y:0,z:0},Math.PI/2);b.setTranslation(0,-o,0);b.setMatrix(t._styleTransform,t._styleBackfaceVisibility);var w=new css3d.element(p);w.setBackfaceCulling(true);w.setRotation({x:1,y:0,z:0},-Math.PI/2);w.setTranslation(0,o,0);w.setMatrix(t._styleTransform,t._styleBackfaceVisibility);n.addElement(d);return d},plane:function(e,t,n,r,i,s,o,u){var a=n/r;var f=n/2;var l=new css3d.element;t.addElement(l);o=o==null?true:o;u=u==null?true:u;var c;var h;for(var p=0;p<r;p++){for(var d=0;d<r;d++){c=document.createElement("div");c.style.position="absolute";c.style.width=a+"px";c.style.height=a+"px";e.appendChild(c);if(i){c.id=i+"-"+p+"-"+d}if(s){c.className=s+" "+s+"-"+p+"-"+d}h=new css3d.element(c);h.setBackfaceCulling(o);h.shading=u;h.setTranslation(-f+d*a,-f+p*a,0);h.inheritScaling=true;h.setParent(l);t.addElement(h)}}return l},skybox:function(e,t,n,r,i){var s=(n-2)/2;var o=new css3d.element;var u=document.createElement("div");u.style.position="absolute";u.style.width=n+"px";u.style.height=n+"px";e.appendChild(u);var a=document.createElement("div");a.style.position="absolute";a.style.width=n+"px";a.style.height=n+"px";e.appendChild(a);var f=document.createElement("div");f.style.position="absolute";f.style.width=n+"px";f.style.height=n+"px";e.appendChild(f);var l=document.createElement("div");l.style.position="absolute";l.style.width=n+"px";l.style.height=n+"px";e.appendChild(l);var c=document.createElement("div");c.style.position="absolute";c.style.width=n+"px";c.style.height=n+"px";e.appendChild(c);var h=document.createElement("div");h.style.position="absolute";h.style.width=n+"px";h.style.height=n+"px";e.appendChild(h);if(r){u.id=r+"-back";a.id=r+"-front";f.id=r+"-left";l.id=r+"-right";c.id=r+"-top";h.id=r+"-bottom"}if(i){u.className=i+" "+i+"-back";a.className=i+" "+i+"-front";f.className=i+" "+i+"-left";l.className=i+" "+i+"-right";c.className=i+" "+i+"-top";h.className=i+" "+i+"-bottom"}var p=true;var d=false;var v=new css3d.element(u);v.setBackfaceCulling(p);v.shading=d;v.setTranslation(0,0,-s);v.inheritScaling=true;var m=new css3d.element(a);m.setBackfaceCulling(p);m.shading=d;m.setTranslation(0,0,s);m.setRotation({x:0,y:1,z:0},Math.PI);m.inheritScaling=true;var g=new css3d.element(f);g.setBackfaceCulling(p);g.shading=d;g.setRotation({x:0,y:1,z:0},Math.PI/2);g.setTranslation(-s,0,0);g.inheritScaling=true;var y=new css3d.element(l);y.setBackfaceCulling(p);y.shading=d;y.setRotation({x:0,y:1,z:0},-Math.PI/2);y.setTranslation(s,0,0);y.inheritScaling=true;var b=new css3d.element(c);b.setBackfaceCulling(p);b.shading=d;b.setRotation({x:1,y:0,z:0},-Math.PI/2);b.setTranslation(0,-s,0);b.inheritScaling=true;var w=new css3d.element(h);w.setBackfaceCulling(p);w.shading=d;w.setRotation({x:1,y:0,z:0},Math.PI/2);w.setTranslation(0,s,0);w.inheritScaling=true;v.setParent(o);m.setParent(o);g.setParent(o);y.setParent(o);b.setParent(o);w.setParent(o);t.addElement(o);t.addElement(v);t.addElement(m);t.addElement(g);t.addElement(y);t.addElement(b);t.addElement(w);return o},fromObj:function(e,t,n,r,i,s,o,u,a){r=r||"model";i=i==null?true:i;s=s==null?true:s;o=o==null?false:o;u=u==null?"":u;a=a==null?1024:a;var f=css3d.ajax.getS(n);var l=[];var c=[];var h=[];h[0]=[204,204,204];var p=[];var d=[];var v=/c ([0-9]*) ([0-9]*) ([0-9]*)/gim;var m=/v ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;var g=/f ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)(.*)$/gim;var y=/f ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*)(.*)$/gim;var b=/[0-9\/.]* ([0-9])$/;var w=/vt ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;var E=false;while(E=m.exec(f)){l.push([parseFloat(E[1])*-1,parseFloat(E[2]),parseFloat(E[3])])}while(E=w.exec(f)){p.push([parseFloat(E[1]),parseFloat(E[2]),parseFloat(E[3])])}var S=new css3d.element;var x=0;while(E=g.exec(f)){d.push(E)}while(E=y.exec(f)){d.push(E)}var T=0;while(E=d[T++]){if(E.length<5){continue}if(E.length>=9){var N=Math.abs(parseInt(E[1]))-1;var C=Math.abs(parseInt(E[3]))-1;var k=Math.abs(parseInt(E[5]))-1;var L=Math.abs(parseInt(E[7]))-1;var A=Math.abs(parseInt(E[2]))-1;var O=Math.abs(parseInt(E[4]))-1;var M=Math.abs(parseInt(E[6]))-1;var _=Math.abs(parseInt(E[8]))-1;var D=new css3d.vector3(p[A][0],p[A][1],p[A][2]);var P=new css3d.vector3(p[O][0],p[O][1],p[O][2]);var H=new css3d.vector3(p[M][0],p[M][1],p[M][2]);var B=new css3d.vector3(p[_][0],p[_][1],p[_][2])}else if(E.length>=5){var N=Math.abs(parseInt(E[1]))-1;var C=Math.abs(parseInt(E[2]))-1;var k=Math.abs(parseInt(E[3]))-1;var L=Math.abs(parseInt(E[4]))-1}var j=new css3d.vector3(l[N][0],l[N][1],l[N][2]);var F=new css3d.vector3(l[C][0],l[C][1],l[C][2]);var I=new css3d.vector3(l[k][0],l[k][1],l[k][2]);var q=new css3d.vector3(l[L][0],l[L][1],l[L][2]);var R=css3d.vector3.prototype.cross(css3d.vector3.prototype.sub2(F,j),css3d.vector3.prototype.sub2(I,j)).normalize();if(!o){R.x=-R.x;R.y=-R.y;R.z=-R.z}var U=css3d.vector3.prototype.cross(R,css3d.vector3.prototype.sub2(F,j).normalize()).normalize();var z=css3d.vector3.prototype.cross(R,U);var W=R;var X=[U.x,z.x,W.x,0,U.y,z.y,W.y,0,U.z,z.z,W.z,0,0,0,0,1];var V=Math.sqrt(Math.pow(I.x-F.x,2)+Math.pow(I.y-F.y,2)+Math.pow(I.z-F.z,2)).toFixed(4);var $=Math.sqrt(Math.pow(F.x-j.x,2)+Math.pow(F.y-j.y,2)+Math.pow(F.z-j.z,2)).toFixed(4);var J=(j.x+F.x+I.x+q.x)/4;var K=(j.y+F.y+I.y+q.y)/4;var Q=(j.z+F.z+I.z+q.z)/4;var G=document.createElement("div");G.className=r+" "+r+"-"+x;G.style.position="absolute";G.style.width=V+"px";G.style.height=$+"px";G.style.backgroundColor="#ccc";if(E.length>=9){var Y=D.x*a;var Z=a-D.y*a;var et=P.x*a;var tt=a-P.y*a;var nt=H.x*a;var rt=a-H.y*a;var it=B.x*a;var st=a-B.y*a;var ot=it-et;if(ot<0){ot=et-it;et=nt}var ut=st-tt;if(ut<0){ut=tt-st;tt=rt}var at=V/ot;var ft=$/ut;G.style.backgroundPosition=(-et*at).toFixed(4)+"px "+(-tt*ft).toFixed(4)+"px";G.style.backgroundImage='url("'+u+'")';G.style.backgroundSize=(a*at).toFixed(4)+"px "+(a*ft).toFixed(4)+"px"}e.appendChild(G);var lt=new css3d.element(G);lt.setBackfaceCulling(i);lt.shading=s;lt.setTranslation(J,K,Q);lt.setRotationMatrix(X);lt.inheritScaling=true;lt.setParent(S);t.addElement(lt);x++}console.log("obj file loaded. "+x+" faces");S.setScale(-1,-1,1);t.addElement(S);return S}};css3d.math={};css3d.math.lerp=function(e,t,n){return e+(t-e)*n};css3d.math.randomNumber=function(e,t){return Math.random()*(t-e)+e};css3d.math.randomInteger=function(e,t){return Math.floor(Math.random()*(t-e+1))+e};css3d.math.interpolation={};css3d.math.interpolation.hermite=function(e){return css3d.math.lerp(0,1,e*e*(3-2*e))};css3d.math.interpolation.sinerp=function(e){return css3d.math.lerp(0,1,Math.sin(e*Math.PI*.5))};css3d.math.interpolation.bounce=function(e){return 1-Math.abs(Math.sin(5.5*(e+1)*(e+1))*(1-e))};css3d.math.interpolation.berp=function(e){return(Math.sin(e*Math.PI*(.2+2.5*e*e*e))*Math.pow(1.01-e,2.2)+e)*(1+1.2*(1-e))};css3d.math.interpolation.smoothStep=function(e){var t=e/1;return-2*t*t*t+3*t*t};css3d.matrix4={D2R:Math.PI/180,identity:function(){return[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]},multiply:function(e,t){return[e[0]*t[0]+e[1]*t[4]+e[2]*t[8]+e[3]*t[12],e[0]*t[1]+e[1]*t[5]+e[2]*t[9]+e[3]*t[13],e[0]*t[2]+e[1]*t[6]+e[2]*t[10]+e[3]*t[14],e[0]*t[3]+e[1]*t[7]+e[2]*t[11]+e[3]*t[15],e[4]*t[0]+e[5]*t[4]+e[6]*t[8]+e[7]*t[12],e[4]*t[1]+e[5]*t[5]+e[6]*t[9]+e[7]*t[13],e[4]*t[2]+e[5]*t[6]+e[6]*t[10]+e[7]*t[14],e[4]*t[3]+e[5]*t[7]+e[6]*t[11]+e[7]*t[15],e[8]*t[0]+e[9]*t[4]+e[10]*t[8]+e[11]*t[12],e[8]*t[1]+e[9]*t[5]+e[10]*t[9]+e[11]*t[13],e[8]*t[2]+e[9]*t[6]+e[10]*t[10]+e[11]*t[14],e[8]*t[3]+e[9]*t[7]+e[10]*t[11]+e[11]*t[15],e[12]*t[0]+e[13]*t[4]+e[14]*t[8]+e[15]*t[12],e[12]*t[1]+e[13]*t[5]+e[14]*t[9]+e[15]*t[13],e[12]*t[2]+e[13]*t[6]+e[14]*t[10]+e[15]*t[14],e[12]*t[3]+e[13]*t[7]+e[14]*t[11]+e[15]*t[15]]},rotationX:function(e){var t=Math.cos(e),n=Math.sin(e);return[1,0,0,0,0,t,-n,0,0,n,t,0,0,0,0,1]},rotationY:function(e){var t=Math.cos(e),n=Math.sin(e);return[t,0,n,0,0,1,0,0,-n,0,t,0,0,0,0,1]},rotationZ:function(e){var t=Math.cos(e),n=Math.sin(e);return[t,-n,0,0,n,t,0,0,0,0,1,0,0,0,0,1]},rotationAxis:function(e,t){var n=Math.cos(t);var r=Math.sin(t);var i=1-n;var s=e.x,o=e.y,u=e.z;var a=i*s,f=i*o;return[a*s+n,a*o-r*u,a*u+r*o,0,a*o+r*u,f*o+n,f*u-r*s,0,a*u-r*o,f*u+r*s,i*u*u+n,0,0,0,0,1]},scale:function(e,t,n){return[e,0,0,0,0,t,0,0,0,0,n,0,0,0,0,1]},translation:function(e,t,n){return[1,0,0,e,0,1,0,t,0,0,1,n,0,0,0,1]},right:function(e){return new css3d.vector3(e[0],e[4],e[8])},up:function(e){return new css3d.vector3(-e[1],-e[5],-e[9])},back:function(e){return new css3d.vector3(e[2],e[6],e[10])},frustum:function(e,t,n,r,i,s){var o=t-e;var u=r-n;var a=s-i;var f=2*i;return[f/o,0,(t+e)/o,0,0,f/u,(r+n)/u,0,0,0,-(s+i)/a,-2*s*i/a,0,0,-1,0]},projection:function(e,t,n,r,i){var s=e*this.D2R;var o=Math.tan(s/2)*r;var u=o*(t/n);return this.frustum(-u,u,-o,o,r,i)},lookAt:function(e,t,n){var r=new css3d.vector3(t.x,t.y,t.z);var i=new css3d.vector3(e.x,e.y,e.z);var s=i.sub(r).normalize();var o=css3d.vector3.prototype.cross(s,n).normalize();var u=css3d.vector3.prototype.cross(s,o);return[o.x,u.x,s.x,0,o.y,u.y,s.y,0,o.z,u.z,s.z,0,0,0,0,1]},transpose:function(e){return[e[0],e[4],e[8],e[12],e[1],e[5],e[9],e[13],e[2],e[6],e[10],e[14],e[3],e[7],e[11],e[15]]},fastInverse:function(e){var t=-e[3]*e[0]+ -e[7]*e[4]+ -e[11]*e[8];var n=-e[3]*e[1]+ -e[7]*e[5]+ -e[11]*e[9];var r=-e[3]*e[2]+ -e[7]*e[6]+ -e[11]*e[10];return[e[0],e[4],e[8],t,e[1],e[5],e[9],n,e[2],e[6],e[10],r,0,0,0,1]},toAxisAngle:function(e){var t=css3d.quaternion.prototype.fromMatrix4(e);return t.toAxisAngle()},toString:function(e){var t="";t+=e[0].toFixed(2)+",	"+e[1].toFixed(2)+",	"+e[2].toFixed(2)+",	"+e[3].toFixed(2)+","+"\n";t+=e[4].toFixed(2)+",	"+e[5].toFixed(2)+",	"+e[6].toFixed(2)+",	"+e[7].toFixed(2)+","+"\n";t+=e[8].toFixed(2)+",	"+e[9].toFixed(2)+",	"+e[10].toFixed(2)+",	"+e[11].toFixed(2)+","+"\n";t+=e[12].toFixed(2)+",	"+e[13].toFixed(2)+",	"+e[14].toFixed(2)+",	"+e[15].toFixed(2);t+="";return t}};css3d.quaternion=function(){var e=function(e,t,n,r){this.x=e||0;this.y=t||0;this.z=n||0;this.w=r||1;this.TOLERANCE=1e-5};e.prototype.normalize=function(){var e=this.w*this.w+this.x*this.x+this.y*this.y+this.z*this.z;if(Math.abs(e)>this.TOLERANCE&&Math.abs(e-1)>this.TOLERANCE){var t=Math.sqrt(e);this.x/=t;this.y/=t;this.z/=t;this.w/=t}return this};e.prototype.getConjugate=function(){return new css3d.quaternion(-this.x,-this.y,-this.z,this.w)};e.prototype.multiply=function(e){return new css3d.quaternion(this.w*e.x+this.x*e.w+this.y*e.z-this.z*e.y,this.w*e.y+this.y*e.w+this.z*e.x-this.x*e.z,this.w*e.z+this.z*e.w+this.x*e.y-this.y*e.x,this.w*e.w-this.x*e.x-this.y*e.y-this.z*e.z)};e.prototype.multiplyVector=function(e){var t=new css3d.vector3(e.x,e.y,e.z);t.normalize();var n=new css3d.quaternion;n.x=t.x;n.y=t.y;n.z=t.z;n.w=0;var r=n.multiply(this.getConjugate());r=this.multiply(r);return new css3d.vector3(r.x,r.y,r.z)};e.prototype.fromAxisAngle=function(e,t){t*=.5;var n=Math.sin(t);return new css3d.quaternion(e.x*n,e.y*n,e.z*n,Math.cos(t))};e.prototype.fromXYZ=function(e,t,n){e*=.5;t*=.5;n*=.5;var r=Math.sin(t);var i=Math.sin(n);var s=Math.sin(e);var o=Math.cos(t);var u=Math.cos(n);var a=Math.cos(e);return(new css3d.quaternion(s*o*u-a*r*i,a*r*u+s*o*i,a*o*i-s*r*u,a*o*u+s*r*i)).normalize()};e.prototype.fromMatrix4=function(e){var t=e[0]+e[5]+e[10];var n=new css3d.quaternion;if(t>0){var r=Math.sqrt(t+1)*2;n.w=.25*r;n.x=(e[9]-e[6])/r;n.y=(e[2]-e[8])/r;n.z=(e[4]-e[1])/r}else if(e[0]>e[5]&e[0]>e[10]){var r=Math.sqrt(1+e[0]-e[5]-e[10])*2;n.w=(e[9]-e[6])/r;n.x=.25*r;n.y=(e[1]+e[4])/r;n.z=(e[2]+e[8])/r}else if(e[5]>e[10]){var r=Math.sqrt(1+e[5]-e[0]-e[10])*2;n.w=(e[2]-e[8])/r;n.x=(e[1]+e[4])/r;n.y=.25*r;n.z=(e[6]+e[9])/r}else{var r=Math.sqrt(1+e[10]-e[0]-e[5])*2;n.w=(e[4]-e[1])/r;n.x=(e[2]+e[8])/r;n.y=(e[6]+e[9])/r;n.z=.25*r}return n};e.prototype.toMatrix4=function(){var e=this.x*this.x;var t=this.y*this.y;var n=this.z*this.z;var r=this.x*this.y;var i=this.x*this.z;var s=this.y*this.z;var o=this.w*this.x;var u=this.w*this.y;var a=this.w*this.z;return[1-2*(t+n),2*(r-a),2*(i+u),0,2*(r+a),1-2*(e+n),2*(s-o),0,2*(i-u),2*(s+o),1-2*(e+t),0,0,0,0,1]};e.prototype.right=function(){return new css3d.vector3(1-2*(this.y*this.y+this.z*this.z),2*(this.x*this.y+this.w*this.z),2*(this.x*this.z-this.w*this.y))};e.prototype.up=function(){return new css3d.vector3(2*(this.x*this.y-this.w*this.z),1-2*(this.x*this.x+this.z*this.z),2*(this.y*this.z+this.w*this.x))};e.prototype.forward=function(){return new css3d.vector3(2*(this.x*this.z+this.w*this.y),2*(this.y*this.x-this.w*this.x),1-2*(this.x*this.x+this.y*this.y))};e.prototype.slerp=function(e,t,n){var r=new css3d.quaternion;var i=e.w*t.w+e.x*t.x+e.y*t.y+e.z*t.z;if(i<0){t.w=-t.w;t.x=-t.x;t.y=-t.y;t.z=t.z;i=-i}if(Math.abs(i)>=1){r.w=e.w;r.x=e.x;r.y=e.y;r.z=e.z;return r}var s=Math.acos(i);var o=Math.sqrt(1-i*i);if(Math.abs(o)<.001){r.w=e.w*.5+t.w*.5;r.x=e.x*.5+t.x*.5;r.y=e.y*.5+t.y*.5;r.z=e.z*.5+t.z*.5;return r}var u=Math.sin((1-n)*s)/o;var a=Math.sin(n*s)/o;r.w=e.w*u+t.w*a;r.x=e.x*u+t.x*a;r.y=e.y*u+t.y*a;r.z=e.z*u+t.z*a;return r};e.prototype.toAxisAngle=function(){if(this.w>1)this.normalize();var e=2*Math.acos(this.w);var t=Math.sqrt(1-this.w*this.w);var n=new css3d.vector3;if(t<.001){n.x=this.x;n.y=this.y;n.z=this.z}else{n.x=this.x/t;n.y=this.y/t;n.z=this.z/t}return{axis:n,angle:e}};return e}();css3d.scene=function(){var e=function(){this._elements=[];this._camera=new css3d.camera;this._light=(new css3d.vector3(0,0,-1)).normalize();this._shadingIntensity=.7;this.depthCueing=true};e.prototype.getElements=function(){return this._elements};e.prototype.addElement=function(e){this._elements.push(e);return this};e.prototype.getElementById=function(e){for(var t=0;t<this._elements.length;t++){if(null!=this._elements[t]._domElement&&this._elements[t]._domElement.id==e){return this._elements[t]}}return null};e.prototype.getCamera=function(){return this._camera};e.prototype.getLight=function(){return this._light};e.prototype.getShadingIntensity=function(){return this._shadingIntensity};e.prototype.update=function(){var e=this._elements;for(var t=0;t<e.length;t++){e[t].update()}this._camera.update();return this};return e}();css3d.vector3=function(e){var t=function(e,t,n){this.x=e||0;this.y=t||0;this.z=n||0};t.prototype.set=function(e,t,n){this.x=e||0;this.y=t||0;this.z=n||0;return this};t.prototype.magnitude=function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z)};t.prototype.normalize=function(){var e=this.magnitude();if(e!==0){this.x/=e;this.y/=e;this.z/=e}return this};t.prototype.dot=function(e){return this.x*e.x+this.y*e.y+this.z*e.z};t.prototype.dot2=function(e,t){return e.x*t.x+e.y*t.y+e.z*t.z};t.prototype.cross=function(t,n){var r=new e.vector3(t.y*n.z-t.z*n.y,t.z*n.x-t.x*n.z,t.x*n.y-t.y*n.x);return r};t.prototype.sub=function(e){this.x-=e.x;this.y-=e.y;this.z-=e.z;return this};t.prototype.sub2=function(t,n){var r=new e.vector3(t.x-n.x,t.y-n.y,t.z-n.z);return r};t.prototype.transform=function(t){return new e.vector4(this.x*t[0]+this.y*t[1]+this.z*t[2]+t[3],this.x*t[4]+this.y*t[5]+this.z*t[6]+t[7],this.x*t[8]+this.y*t[9]+this.z*t[10]+t[11],this.x*t[12]+this.y*t[13]+this.z*t[14]+t[15])};t.prototype.clone=function(){return new e.vector3(this.x,this.y,this.z)};t.prototype.toString=function(){return this.x.toFixed(2)+","+this.y.toFixed(2)+","+this.z.toFixed(2)};t.prototype.isZero=function(){return this.x==0&&this.y==0&&this.z==0};return t}(css3d);css3d.vector4=function(){var e=function(e,t,n,r){this.x=e||0;this.y=t||0;this.z=n||0;this.w=r||1};e.prototype.homogenize=function(){if(this.w!==1){this.x/=this.w;this.y/=this.w;this.z/=this.w;this.w=1}return this};e.prototype.magnitude=function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)};e.prototype.normalize=function(){var e=this.magnitude();if(e!==0){this.x/=e;this.y/=e;this.z/=e;this.w/=e}return this};e.prototype.dot=function(e){return this.x*e.x+this.y*e.y+this.z*e.z+(this.w+e.w)};e.prototype.cross=function(e,t){var e=(new css3d.vector4(e.x,e.y,e.z,e.w)).homogenize();var t=(new css3d.vector4(t.x,t.y,t.z,t.w)).homogenize();var n=new css3d.vector4(e.y*t.z-e.z*t.y,e.z*t.x-e.x*t.z,e.x*t.y-e.y*t.x,1);n.normalize();return n};e.prototype.transform=function(e){return new css3d.vector4(this.x*e[0]+this.y*e[1]+this.z*e[2]+this.w*e[3],this.x*e[4]+this.y*e[5]+this.z*e[6]+this.w*e[7],this.x*e[8]+this.y*e[9]+this.z*e[10]+this.w*e[11],this.x*e[12]+this.y*e[13]+this.z*e[14]+this.w*e[15])};e.prototype.toVector3=function(){return new css3d.vector3(this.x,this.y,this.z)};return e}()
\ No newline at end of file
diff --git a/src/css3d.elementFactory.js b/src/css3d.elementFactory.js
index 7ad4498..c99e5b0 100644
--- a/src/css3d.elementFactory.js
+++ b/src/css3d.elementFactory.js
@@ -681,15 +681,19 @@ css3d.elementFactory = {
      * @param {Boolean|null} backfaceCulling
      * @param {Boolean|null} shading
      * @param {Boolean|null} clockwise  The face winding direction
+     * @param {String} textureFile  Path to texture file
+     * @param {Integer} textureSize Texture size (The texture has to be a square)
      * @returns {css3d.element} This is the parent element 
      */
-    fromObj : function(container, scene, objFile, className, backfaceCulling, shading, clockwise)
+    fromObj : function(container, scene, objFile, className, backfaceCulling, shading, clockwise, textureFile, textureSize)
     {
 
         className = className || 'model';
         backfaceCulling = (backfaceCulling == null) ? true : backfaceCulling;
         shading = (shading == null) ? true : shading;
         clockwise = (clockwise == null) ? false : clockwise;
+        textureFile = (textureFile == null) ? '' : textureFile;
+        textureSize = (textureSize == null) ? 1024 : textureSize;        
 
         var objContent = css3d.ajax.getS(objFile);
 
@@ -697,11 +701,16 @@ css3d.elementFactory = {
         var faces = [];
         var colors = [];
         colors[0] = [204, 204, 204];
+        var textureCoordinates = [];
+        var faceMatches = [];
 
         var findColors = /c ([0-9]*) ([0-9]*) ([0-9]*)/gim;
         var findVertices = /v ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;
-        var findFaces = /f ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*)(.*)$/gim;
+        //var findFaces1 = /f ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*)(.*)$/gim;
+        var findFaces1 = /f ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)(.*)$/gim;
+        var findFaces2 = /f ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*)(.*)$/gim;        
         var findFaceColor = /[0-9\/.]* ([0-9])$/;
+        var findTextureCoordinates = /vt ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;
 
         var matches = false;
 
@@ -715,20 +724,51 @@ css3d.elementFactory = {
             vertices.push([parseFloat(matches[1])*-1, parseFloat(matches[2]), parseFloat(matches[3])]);
         }
         
+        while (matches = findTextureCoordinates.exec(objContent)) {
+            textureCoordinates.push([parseFloat(matches[1]), parseFloat(matches[2]), parseFloat(matches[3])]);
+        }
+ 
         var elementGroup = new css3d.element();
 
         var count = 0;
+        
+        while (matches = findFaces1.exec(objContent)) {
+            faceMatches.push(matches);
+        }
+        
+        while (matches = findFaces2.exec(objContent)) {
+            faceMatches.push(matches);
+        }
 
-        while (matches = findFaces.exec(objContent)) {
+        var i=0
+        while (matches = faceMatches[i++]) {
             
             if (matches.length < 5) {
                 continue;
             }
-
-            var f0 = Math.abs(parseInt(matches[1]))-1;
-            var f1 = Math.abs(parseInt(matches[2]))-1;
-            var f2 = Math.abs(parseInt(matches[3]))-1;
-            var f3 = Math.abs(parseInt(matches[4]))-1;
+       
+            if (matches.length >= 9) {
+                var f0 = Math.abs(parseInt(matches[1]))-1;
+                var f1 = Math.abs(parseInt(matches[3]))-1;
+                var f2 = Math.abs(parseInt(matches[5]))-1;
+                var f3 = Math.abs(parseInt(matches[7]))-1;
+                
+                var ft0 = Math.abs(parseInt(matches[2]))-1;
+                var ft1 = Math.abs(parseInt(matches[4]))-1;
+                var ft2 = Math.abs(parseInt(matches[6]))-1;
+                var ft3 = Math.abs(parseInt(matches[8]))-1;
+                
+                var vt0 = new css3d.vector3(textureCoordinates[ft0][0], textureCoordinates[ft0][1], textureCoordinates[ft0][2]);
+                var vt1 = new css3d.vector3(textureCoordinates[ft1][0], textureCoordinates[ft1][1], textureCoordinates[ft1][2]);
+                var vt2 = new css3d.vector3(textureCoordinates[ft2][0], textureCoordinates[ft2][1], textureCoordinates[ft2][2]);
+                var vt3 = new css3d.vector3(textureCoordinates[ft3][0], textureCoordinates[ft3][1], textureCoordinates[ft3][2]);
+            }
+            else if (matches.length >= 5) {
+                var f0 = Math.abs(parseInt(matches[1]))-1;
+                var f1 = Math.abs(parseInt(matches[2]))-1;
+                var f2 = Math.abs(parseInt(matches[3]))-1;
+                var f3 = Math.abs(parseInt(matches[4]))-1;
+            }
                   
             var v0 = new css3d.vector3(vertices[f0][0], vertices[f0][1], vertices[f0][2]);
             var v1 = new css3d.vector3(vertices[f1][0], vertices[f1][1], vertices[f1][2]);
@@ -760,8 +800,8 @@ css3d.elementFactory = {
             ];
            
             // get dimension
-            var width = Math.sqrt(Math.pow(v2.x - v1.x, 2) + Math.pow(v2.y - v1.y, 2) + Math.pow(v2.z - v1.z, 2)).toFixed(2);            
-            var height = Math.sqrt(Math.pow(v1.x - v0.x, 2) + Math.pow(v1.y - v0.y, 2) + Math.pow(v1.z - v0.z, 2)).toFixed(2);                       
+            var width = Math.sqrt(Math.pow(v2.x - v1.x, 2) + Math.pow(v2.y - v1.y, 2) + Math.pow(v2.z - v1.z, 2)).toFixed(4);            
+            var height = Math.sqrt(Math.pow(v1.x - v0.x, 2) + Math.pow(v1.y - v0.y, 2) + Math.pow(v1.z - v0.z, 2)).toFixed(4);                       
 
             // get position
             var x = ((v0.x + v1.x + v2.x + v3.x) / 4.0);
@@ -775,6 +815,40 @@ css3d.elementFactory = {
             div.style.width = width+'px';
             div.style.height = height+'px';
             div.style.backgroundColor = '#ccc';
+            
+            // texture mapping
+            if (matches.length >= 9) {
+                var tx0 = vt0.x * textureSize;
+                var ty0 = textureSize - (vt0.y * textureSize); 
+                var tx1 = vt1.x * textureSize;
+                var ty1 = textureSize - (vt1.y * textureSize); 
+                var tx2 = vt2.x * textureSize;
+                var ty2 = textureSize - (vt2.y * textureSize); 
+                var tx3 = vt3.x * textureSize;
+                var ty3 = textureSize - (vt3.y * textureSize);
+       
+                var vWidth = tx3 - tx1;
+                if (vWidth < 0) {
+                    vWidth = tx1 - tx3;
+                    tx1 = tx2;
+                }                
+                var vHeight = ty3 - ty1;
+                if (vHeight < 0) {
+                    vHeight = ty1 - ty3;
+                    ty1 = ty2;
+                }
+                
+                var scaleX = width/vWidth;
+                var scaleY = height/vHeight;
+                
+                // TODO:
+                // there is a problem with texture rotation
+                // some elements are 90 or 180 degrees rotated
+                div.style.backgroundPosition = (-tx1*scaleX).toFixed(4)+'px '+(-ty1*scaleY).toFixed(4)+'px';
+                div.style.backgroundImage = 'url("'+textureFile+'")';
+                div.style.backgroundSize = (textureSize*scaleX).toFixed(4)+'px '+(textureSize*scaleY).toFixed(4)+'px';
+            }            
+            
             container.appendChild(div);
             
             var element = new css3d.element(div);
@@ -782,14 +856,13 @@ css3d.elementFactory = {
             element.shading = shading;
             element.setTranslation(x, y, z);
             element.setRotationMatrix(rotationMatrix);
-            //element.setScale(1, -1, 1);
             element.inheritScaling = true;            
             element.setParent(elementGroup);
             scene.addElement(element);
 
             count++;
-        }
-        
+        }        
+       
         console.log('obj file loaded. ' + count + ' faces');
         
         elementGroup.setScale(-1, -1, 1);        
diff --git a/textures/2x_EscherCubeFish_1024.jpg b/textures/2x_EscherCubeFish_1024.jpg
new file mode 100644
index 0000000..76b109b
Binary files /dev/null and b/textures/2x_EscherCubeFish_1024.jpg differ
diff --git a/textures/scifi01.jpg b/textures/scifi01.jpg
new file mode 100644
index 0000000..c418138
Binary files /dev/null and b/textures/scifi01.jpg differ