Menu
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() */
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?
UPDATE #1 - 11/12/12 So based on the answers provided, I've come across the unoptimized function from http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToEuler/index.htm below:
/*
-v 0.940148 -0.847439 -1.052535
-v 0.940148 -0.847439 0.947465
-v -1.059852 -0.847439 0.947465
-v -1.059852 -0.847439 -1.052535
-v 0.940148 1.152561 -1.052534
-v 0.940147 1.152561 0.947466
-v -1.059852 1.152561 0.947465
v -1.059852 1.152561 -1.052535
f 1 2 3 4
f 5 8 7 6
f 1 5 6 2
f 2 6 7 3
f 3 7 8 4
f 5 1 4 8
*/
var f = {
'm00' : 0.940148,
'm01' : -0.847439,
'm02' : -1.052535,
'm10' : 0.940148,
'm11' : -0.847439,
'm12' : 0.947465,
'm20' : -1.059852,
'm21' : -0.847439,
'm22' : 0.947465
}
// Assuming the angles are in radians.
if (f.m10 > 0.998) { // singularity at north pole
heading = Math.atan2(f.m02, f.m22);
attitude = Math.PI/2;
bank = 0;
} else if (f.m10 < -0.998) { // singularity at south pole
heading = Math.atan2(f.m02,f.m22);
attitude = -Math.PI/2;
bank = 0;
} else {
heading = Math.atan2(-f.m20, f.m00);
bank = Math.atan2(-f.m12, f.m11);
attitude = Math.asin(f.m10);
}
I'm getting results, but I'm not sure if my calculations are correct and I'm also getting mixed responses on what corresponds to which axis. Is it heading = y, bank = x, and attitude = z? I'm also converting each to degrees if that matters.
429
Read this http://www.songho.ca/opengl/gl_matrix.html It explains pretty much everything and there is implementation.
Beside that the CSS 3D solution will have lower performance(order of magnitude) mainly because each pice of represented surface is DOM element, it's also highly limited - you can find numerous materials about this issue(Google IO records for example)
If you need declarative 3D framework you might want to look at x3dom
To draw a 3D box you just need to include x3dom js script and embed this declaration in your page:
<body>
<h1>Hello X3DOM World</h1>
<x3d width="400" height="300">
<scene>
<shape>
<box></box>
</shape>
</scene>
</x3d>
</body>
It will parse <x3d> tags on your page and generate proper WebGL or Flash implementation with the good performance.
x3d has way to import assets from Blender, Maya and 3ds Max. Here is some good reading: x3domIntroTutorial.pdf
IE 11 will support WebGL and IE10 will autoupdate to IE 11 so only non-supporting desktop browser(disabled by default) will be Safari. Apple will be forced to enable it by default. With full desktop support it won't take too long to get full mobile because it's highly competitive market. And we have highly accessible WebGL framework like three.js. So there is no sense in doing it with CSS 3D
UPDATE: iOS 8 Safari will enable WebGL support by default: http://caniuse.com/webgl
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
