@@ -708,27 +708,36 @@ <h1 class="page-title">Source: css3d.elementFactory.js</h1>
708708 * @param {Boolean|null} backfaceCulling
709709 * @param {Boolean|null} shading
710710 * @param {Boolean|null} clockwise The face winding direction
711+ * @param {String} textureFile Path to texture file
712+ * @param {Integer} textureSize Texture size (The texture has to be a square)
711713 * @returns {css3d.element} This is the parent element
712714 */
713- fromObj : function(container, scene, objFile, className, backfaceCulling, shading, clockwise)
715+ fromObj : function(container, scene, objFile, className, backfaceCulling, shading, clockwise, textureFile, textureSize )
714716 {
715717
716718 className = className || 'model';
717719 backfaceCulling = (backfaceCulling == null) ? true : backfaceCulling;
718720 shading = (shading == null) ? true : shading;
719721 clockwise = (clockwise == null) ? false : clockwise;
722+ textureFile = (textureFile == null) ? '' : textureFile;
723+ textureSize = (textureSize == null) ? 1024 : textureSize;
720724
721725 var objContent = css3d.ajax.getS(objFile);
722726
723727 var vertices = [];
724728 var faces = [];
725729 var colors = [];
726730 colors[0] = [204, 204, 204];
731+ var textureCoordinates = [];
732+ var faceMatches = [];
727733
728734 var findColors = /c ([0-9]*) ([0-9]*) ([0-9]*)/gim;
729735 var findVertices = /v ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;
730- var findFaces = /f ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*)(.*)$/gim;
736+ //var findFaces1 = /f ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*).*? ([0-9\-.]*)(.*)$/gim;
737+ var findFaces1 = /f ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)(.*)$/gim;
738+ var findFaces2 = /f ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*).*? ([0-9\-.]*).*?\/([0-9\-.]*)(.*)$/gim;
731739 var findFaceColor = /[0-9\/.]* ([0-9])$/;
740+ var findTextureCoordinates = /vt ([0-9\-.]*) ([0-9\-.]*) ([0-9\-.]*)/gim;
732741
733742 var matches = false;
734743
@@ -742,20 +751,51 @@ <h1 class="page-title">Source: css3d.elementFactory.js</h1>
742751 vertices.push([parseFloat(matches[1])*-1, parseFloat(matches[2]), parseFloat(matches[3])]);
743752 }
744753
754+ while (matches = findTextureCoordinates.exec(objContent)) {
755+ textureCoordinates.push([parseFloat(matches[1]), parseFloat(matches[2]), parseFloat(matches[3])]);
756+ }
757+
745758 var elementGroup = new css3d.element();
746759
747760 var count = 0;
761+
762+ while (matches = findFaces1.exec(objContent)) {
763+ faceMatches.push(matches);
764+ }
765+
766+ while (matches = findFaces2.exec(objContent)) {
767+ faceMatches.push(matches);
768+ }
748769
749- while (matches = findFaces.exec(objContent)) {
770+ var i=0
771+ while (matches = faceMatches[i++]) {
750772
751773 if (matches.length < 5) {
752774 continue;
753775 }
754-
755- var f0 = Math.abs(parseInt(matches[1]))-1;
756- var f1 = Math.abs(parseInt(matches[2]))-1;
757- var f2 = Math.abs(parseInt(matches[3]))-1;
758- var f3 = Math.abs(parseInt(matches[4]))-1;
776+
777+ if (matches.length > = 9) {
778+ var f0 = Math.abs(parseInt(matches[1]))-1;
779+ var f1 = Math.abs(parseInt(matches[3]))-1;
780+ var f2 = Math.abs(parseInt(matches[5]))-1;
781+ var f3 = Math.abs(parseInt(matches[7]))-1;
782+
783+ var ft0 = Math.abs(parseInt(matches[2]))-1;
784+ var ft1 = Math.abs(parseInt(matches[4]))-1;
785+ var ft2 = Math.abs(parseInt(matches[6]))-1;
786+ var ft3 = Math.abs(parseInt(matches[8]))-1;
787+
788+ var vt0 = new css3d.vector3(textureCoordinates[ft0][0], textureCoordinates[ft0][1], textureCoordinates[ft0][2]);
789+ var vt1 = new css3d.vector3(textureCoordinates[ft1][0], textureCoordinates[ft1][1], textureCoordinates[ft1][2]);
790+ var vt2 = new css3d.vector3(textureCoordinates[ft2][0], textureCoordinates[ft2][1], textureCoordinates[ft2][2]);
791+ var vt3 = new css3d.vector3(textureCoordinates[ft3][0], textureCoordinates[ft3][1], textureCoordinates[ft3][2]);
792+ }
793+ else if (matches.length > = 5) {
794+ var f0 = Math.abs(parseInt(matches[1]))-1;
795+ var f1 = Math.abs(parseInt(matches[2]))-1;
796+ var f2 = Math.abs(parseInt(matches[3]))-1;
797+ var f3 = Math.abs(parseInt(matches[4]))-1;
798+ }
759799
760800 var v0 = new css3d.vector3(vertices[f0][0], vertices[f0][1], vertices[f0][2]);
761801 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>
787827 ];
788828
789829 // get dimension
790- 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 );
791- 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 );
830+ 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 );
831+ 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 );
792832
793833 // get position
794834 var x = ((v0.x + v1.x + v2.x + v3.x) / 4.0);
@@ -802,21 +842,54 @@ <h1 class="page-title">Source: css3d.elementFactory.js</h1>
802842 div.style.width = width+'px';
803843 div.style.height = height+'px';
804844 div.style.backgroundColor = '#ccc';
845+
846+ // texture mapping
847+ if (matches.length > = 9) {
848+ var tx0 = vt0.x * textureSize;
849+ var ty0 = textureSize - (vt0.y * textureSize);
850+ var tx1 = vt1.x * textureSize;
851+ var ty1 = textureSize - (vt1.y * textureSize);
852+ var tx2 = vt2.x * textureSize;
853+ var ty2 = textureSize - (vt2.y * textureSize);
854+ var tx3 = vt3.x * textureSize;
855+ var ty3 = textureSize - (vt3.y * textureSize);
856+
857+ var vWidth = tx3 - tx1;
858+ if (vWidth < 0) {
859+ vWidth = tx1 - tx3;
860+ tx1 = tx2;
861+ }
862+ var vHeight = ty3 - ty1;
863+ if (vHeight < 0) {
864+ vHeight = ty1 - ty3;
865+ ty1 = ty2;
866+ }
867+
868+ var scaleX = width/vWidth;
869+ var scaleY = height/vHeight;
870+
871+ // TODO:
872+ // there is a problem with texture rotation
873+ // some elements are 90 or 180 degrees rotated
874+ div.style.backgroundPosition = (-tx1*scaleX).toFixed(4)+'px '+(-ty1*scaleY).toFixed(4)+'px';
875+ div.style.backgroundImage = 'url("'+textureFile+'")';
876+ div.style.backgroundSize = (textureSize*scaleX).toFixed(4)+'px '+(textureSize*scaleY).toFixed(4)+'px';
877+ }
878+
805879 container.appendChild(div);
806880
807881 var element = new css3d.element(div);
808882 element.setBackfaceCulling(backfaceCulling);
809883 element.shading = shading;
810884 element.setTranslation(x, y, z);
811885 element.setRotationMatrix(rotationMatrix);
812- //element.setScale(1, -1, 1);
813886 element.inheritScaling = true;
814887 element.setParent(elementGroup);
815888 scene.addElement(element);
816889
817890 count++;
818- }
819-
891+ }
892+
820893 console.log('obj file loaded. ' + count + ' faces');
821894
822895 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
847920< br clear ="both ">
848921
849922< footer >
850- 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)
923+ 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)
851924</ footer >
852925
853926< script > prettyPrint ( ) ; </ script >
0 commit comments