Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Converting OBJ data to CSS3D

Converting OBJ data to CSS3D

Problem

I found a ton of formulae and what not, but 3D isn't my forte so I'm at a loss of what specifically to use. My goal is to convert the data in an 3D .obj file (vertices, normals, faces) to CSS3D (width, height, rotateX,Y,Z and/or similar transforms).

For example 2 simple planes

g plane1
# simple along along Z axis
v  0.0  0.0  0.0
v  0.0  0.0  1.0
v  0.0  1.0  1.0
v  0.0  1.0  0.0

g plane2
# plane rotated 90 degrees along Y-axis
v  0.0  0.0  0.0
v  0.0  1.0  0.0
v  1.0  1.0  0.0
v  1.0  0.0  0.0

f  1 2 3 4
f  5 6 7 8

Could this data be converted to:

#plane1 {
    width: X;
    height: Y;
    transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx)
}

#plane2 {
    width: X;
    height: Y;
    transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx)
}

/* Or something equivalent such as transform: matrix3d() */

The core question is how to get the X/Y/Z-rotation of a 4 point plane from it's matrix of x,y,z coordinates?

UPDATE #1 - 11/12/12 So based on the answers provided, I've come across the unoptimized function from http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToEuler/index.htm below:

/*
    -v 0.940148 -0.847439 -1.052535
    -v 0.940148 -0.847439 0.947465
    -v -1.059852 -0.847439 0.947465
    -v -1.059852 -0.847439 -1.052535
    -v 0.940148 1.152561 -1.052534
    -v 0.940147 1.152561 0.947466
    -v -1.059852 1.152561 0.947465
    v -1.059852 1.152561 -1.052535

    f 1 2 3 4
    f 5 8 7 6
    f 1 5 6 2
    f 2 6 7 3
    f 3 7 8 4
    f 5 1 4 8
*/

var f = {
    'm00' : 0.940148,
    'm01' : -0.847439,
    'm02' : -1.052535,
    'm10' : 0.940148,
    'm11' : -0.847439,
    'm12' : 0.947465,
    'm20' : -1.059852,
    'm21' : -0.847439,
    'm22' : 0.947465
}

// Assuming the angles are in radians.
if (f.m10 > 0.998) { // singularity at north pole
    heading = Math.atan2(f.m02, f.m22);
    attitude = Math.PI/2;
    bank = 0;
} else if (f.m10 

I'm getting results, but I'm not sure if my calculations are correct and I'm also getting mixed responses on what corresponds to which axis. Is it heading = y, bank = x, and attitude = z? I'm also converting each to degrees if that matters.

Problem courtesy of: Don Boots

Solution

Read this http://www.songho.ca/opengl/gl_matrix.html It explains pretty much everything and there is implementation.

Beside that the CSS 3D solution will have lower performance(order of magnitude) mainly because each pice of represented surface is DOM element, it's also highly limited - you can find numerous materials about this issue(Google IO records for example)

If you need declarative 3D framework you might want to look at x3dom

To draw a 3D box you just need to include x3dom js script and embed this declaration in your page:

  
   

Hello X3DOM World

It will parse tags on your page and generate proper WebGL or Flash implementation with the good performance.

x3d has way to import assets from Blender, Maya and 3ds Max. Here is some good reading: x3domIntroTutorial.pdf

IE 11 will support WebGL and IE10 will autoupdate to IE 11 so only non-supporting desktop browser(disabled by default) will be Safari. Apple will be forced to enable it by default. With full desktop support it won't take too long to get full mobile because it's highly competitive market. And we have highly accessible WebGL framework like three.js. So there is no sense in doing it with CSS 3D

UPDATE: iOS 8 Safari will enable WebGL support by default: http://caniuse.com/webgl

Solution courtesy of: JAre

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Converting OBJ data to CSS3D

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×