Question

我发现了大量的公式，但不是，但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？如果重要的话，我也会将每个转换成学位。

Answer 1

enter image description here

阅读本文http://www.songho.ca/opengl/gl_matrix.html它解释了几乎所有内容并且有实施。

除此之外，CSS 3D解决方案将具有较低的性能（数量级），主要是因为每个表示的表面都是DOM元素，它也非常有限 - 您可以找到关于此问题的大量材料（例如Google IO记录）< / p>

如果您需要声明性3D框架，可能需要查看x3dom

要绘制3D框，您只需要包含x3dom js脚本并在页面中嵌入此声明：

 <body> 
   <h1>Hello X3DOM World</h1> 
   <x3d width="400" height="300"> 
     <scene> 
       <shape> 
         <box></box> 
      </shape> 
     </scene> 
   </x3d> 
 </body>

它将解析＆lt; x3d＆gt;在页面上标记并生成具有良好性能的正确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

将OBJ数据转换为CSS3D

1 个答案: