Converting obj data to CSS3D

Posted by Don Boots on Game Development See other posts from Game Development or by Don Boots
Published on 2012-11-09T20:50:22Z Indexed on 2012/11/09 23:26 UTC
Read the original article Hit count: 155

Filed under:
|

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() */

In summary, while this may be too HTML/CSS-y for game development, 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?

© Game Development or respective owner

Related posts about 3d

Related posts about html5