我找到了一大堆公式，但什么都没有，但 3D 不是我的强项，所以我不知 Prop 体要用什么。我的目标是将 3D .obj 文件中的数据(顶点、法线、面)转换为 CSS3D(宽度、高度、rotateX、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 - 2012 年 11 月 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);
}
我得到了结果，但我不确定我的计算是否正确，而且我也得到了关于什么对应于哪个轴的混合响应。航向 = y，坡度 = x，态度 = 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 可以从 Blender、Maya 和 3ds Max 导入资源。 这里有一些很好的阅读:x3domIntroTutorial.pdf
IE 11 将支持 WebGL并且 IE10 将自动更新到 IE 11，因此只有不支持的桌面浏览器(默认情况下禁用)将是 Safari。默认情况下，Apple 将被迫启用它。有了完整的桌面支持，获得完整的移动设备不会花太长时间，因为这是一个竞争激烈的市场。我们拥有高度可访问的 WebGL 框架，如 three.js。所以用 CSS 3D 做这件事是没有意义的
更新:iOS 8 Safari 将默认启用 WebGL 支持:http://caniuse.com/webgl
关于html - 将 OBJ 数据转换为 CSS3D，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13315842/