# How can I convert OBJ data into CSS3D transformations?

I want to convert the data in a 3D .obj file (vertices, normals, faces) to CSS3D (width, height, rotateX,Y,Z and/or similar transforms). I found a bunch of formulae and what-not, but 3D isn't my forte, so I don't know which I should use.

Essentially: How can I get the X/Y/Z-rotation of a 4-point plane from it's matrix of x,y,z coordinates?

For example, here are 2 simple planes in .obj format:

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


I'd like to convert it into CSS:

#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 equivalent, like using transform: matrix3d() */


It is not that hard if you think about if for a while. Now the following assumes that you have perfect rectangles as faces in the OBJ. (I honestly don't know how to do arbitrary polygons.)

I think you can build a orhtonormal R3 matrix from the values in the OBJ.

You have 4 vertices:

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


You can create two perpendicular vectors:

 a = v - v
b = v - v


Now you are just missing the normal, which you can get from a and b:

 n = cross(u, v)


After normalizing everything you should be able to defined the following rotation matrix:

 m_rot = mat3(a, b, n)


The "upper left corner" should be the position of the face. (It may be the center; I am not sure.) This can then be used to create a transformation matrix:

#<planeN> {
// a, b not normalized
width: length(a);
height: length(b);
// a, b & n normalized
transform: matrix3d(a.x, b.x, n.x, v.n,
a.y, b.y, n.y, v.y,
a.z, b.z, n.z, v.z,
0,   0,   0,      1);
}


Please note that I am not sure about the column order of the CSS3 matrix3d directive, it may be inverted.