current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.
up vote 5 down vote favorite
4

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() */
share|improve this question

1 Answer 1

up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.