5

我找到了很多公式，什么都没有，但 3D 不是我的强项，所以我不知道具体要使用什么。我的目标是将 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 - 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);
}

我得到了结果，但我不确定我的计算是否正确，而且我也得到了关于哪个轴对应的混合响应。是航向 = y，银行 = x，态度 = z？如果这很重要，我也会将每个转换为度数。

4

1 回答 1

7

在此处输入图像描述

阅读此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。默认情况下，Apple 将被迫启用它。有了完整的桌面支持，获得完整的移动设备不会花费太长时间，因为它是竞争激烈的市场。我们有高度可访问的 WebGL 框架，例如three.js。所以用 CSS 3D 来做是没有意义的

更新：iOS 8 Safari 默认启用 WebGL 支持：http: //caniuse.com/webgl

于 2012-11-10T07:52:36.333 回答