Converting obj data to CSS3D
- by Don Boots
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?
