Skip to content

Commit

Permalink
obj file texture coordinates
Browse files Browse the repository at this point in the history
Signed-off-by: Jan Fischer <info@bitworking.de>
  • Loading branch information
bitworking committed Jul 10, 2014
1 parent f478dc8 commit 6fe03e5
Show file tree
Hide file tree
Showing 34 changed files with 968 additions and 71 deletions.
2 changes: 1 addition & 1 deletion docs/css3d.ajax.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.ajax.js.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.camera.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.camera.js.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.element.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.element.js.html
Expand Up @@ -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>
Expand Down
52 changes: 49 additions & 3 deletions docs/css3d.elementFactory.html
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>


Expand Down Expand Up @@ -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>
Expand Down
101 changes: 87 additions & 14 deletions docs/css3d.elementFactory.js.html
Expand Up @@ -708,27 +708,36 @@ <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);

var vertices = [];
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;

Expand All @@ -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]);
Expand Down Expand Up @@ -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);
Expand All @@ -802,21 +842,54 @@ <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);
element.setBackfaceCulling(backfaceCulling);
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);
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.js.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.math.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.math.interpolation.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.math.js.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.matrix4.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.matrix4.js.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.quaternion.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.quaternion.js.html
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/css3d.scene.html
Expand Up @@ -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>
Expand Down

0 comments on commit 6fe03e5

Please sign in to comment.