将OBJ数据转换为CSS3D
我发现了大量的公式,但不是,但3D不是我的强项,所以我不知道具体使用什么.我的目标是将3D .obj文件(顶点,法线,面)中的数据转换为CSS3D(宽度,高度,旋转X,Y,Z和/或类似变换).
例如2个简单的飞机
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
这些数据可以转换为:
#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() */
核心问题是如何从它的x,y,z坐标矩阵中获得4点平面的X/Y/Z旋转？
更新#1 - 11/12/12 所以根据提供的答案,我从http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToEuler/index.htm下面看到了未经优化的功能:
/*
-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);
}
我得到了结果,但是我不确定我的计算是否正确,而且我也得到了与哪个轴相对应的混合响应.它是heading = y,bank = x和attitude = z？如果重要的话,我也会将每个转换成学位.
阅读这篇http://www.songho.ca/opengl/gl_matrix.html 它解释了几乎所有内容并且有实现.
除此之外,CSS 3D解决方案将具有较低的性能(数量级),主要是因为每个表示的表面都是DOM元素,它也非常有限 - 您可以找到关于此问题的大量材料(例如Google IO记录)
如果您需要声明性3D框架,您可能需要查看x3dom
要绘制3D框,您只需要包含x3dom js脚本并在页面中嵌入此声明:
<body>
<h1>Hello X3DOM World</h1>
<x3d width="400" height="300">
<scene>
<shape>
<box></box>
</shape>
</scene>
</x3d>
</body>
它将在您的页面上解析<x3d>标记,并生成具有良好性能的正确WebGL或Flash实现.
x3d可以从Blender,Maya和3ds Max导入资源.这是一些很好的阅读:x3domIntroTutorial.pdf
IE 11将支持WebGL,IE10将自动更新到IE 11,因此只有非支持桌面浏览器(默认情况下禁用)才是Safari.苹果将被迫默认启用它.通过全面的桌面支持,获得完整的移动设备不会花费太长时间,因为它是竞争激烈的市场.我们拥有高度可访问的WebGL框架,如three.js.所以用CSS 3D做这件事是没有意义的
更新:iOS 8 Safari默认启用WebGL支持:http://caniuse.com/webgl
| 归档时间： |
|
| 查看次数： |
1348 次 |
| 最近记录： |