# 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[1] - v[0]
b = v[3] - v[0]
``````

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[0].n,
a.y, b.y, n.y, v[0].y,
a.z, b.z, n.z, v[0].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.

-