Fatal编程技术网
  • html/
  • Html 将OBJ数据转换为CSS3D

Html 将OBJ数据转换为CSS3D

html css 3d

Html 将OBJ数据转换为CSS3D,html,css,3d,Html,Css,3d,我发现了很多公式，但3D不是我的特长，所以我不知道该用什么。我的目标是将3D.obj文件中的数据（顶点、法线、面）转换为CSS3D（宽度、高度、旋转度、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-ax

我发现了很多公式，但3D不是我的特长，所以我不知道该用什么。我的目标是将3D.obj文件中的数据（顶点、法线、面）转换为CSS3D（宽度、高度、旋转度、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() */
核心问题是如何从一个4点平面的X，Y，Z坐标矩阵中得到它的X/Y/Z旋转

更新#1-11/12/12 因此，根据提供的答案，我从下面找到了未优化的函数：

/*
-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
*/
变量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
}
//假设角度以弧度为单位。
如果（f.m10>0.998）{//北极奇点
航向=数学atan2（f.m02，f.m22）；
态度=Math.PI/2；
bank=0；
}else如果（f.m10<-0.998）{//南极奇点
航向=数学atan2（f.m02，f.m22）；
态度=-Math.PI/2；
bank=0；
}否则{
航向=数学atan2（-f.m20，f.m00）；
气缸组=数学atan2（-f.m12，f.m11）；
姿态=数学asin（f.m10）；
}
我得到了结果，但我不确定我的计算是否正确，我也得到了与哪个轴对应的混合响应。是航向=y，倾斜=x，姿态=z吗？如果有必要的话，我也会把每一个都转换成学位。

读这篇文章，它解释了几乎所有的事情，并且有实现

除此之外，CSS 3D解决方案的性能（数量级）较低，主要是因为表示的曲面的每个图片都是DOM元素，它也非常有限-您可以找到许多有关此问题的资料（例如Google IO records）

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

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

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


你好，X3DOM世界
它将解析页面上的标签，并生成性能良好的WebGL或Flash实现

x3d可以从Blender、Maya和3ds Max导入资源。 以下是一些好的读物：

IE 11将支持，IE10将自动更新为IE 11，因此只有不支持的桌面浏览器（默认情况下禁用）将是Safari。默认情况下，苹果将被迫启用它。有了全面的桌面支持，完全的移动化不会花费太长时间，因为这是一个竞争激烈的市场。我们有高度可访问的WebGL框架，如three.js。所以用CSS 3D做这件事毫无意义

更新：iOS 8 Safari默认情况下将启用WebGL支持：

可能会将矩阵复制到Euler角度：您衡量了性能吗？根据随机输入值，使用所需数量的css3d转换进行基准测试。如果它会滞后于目标机器，那么您的工作将是浪费时间。普通的obj文件包含大量的面。这不是性能问题。归根结底是我的数学错误。正在使用的OBJ文件是专门为CSS3D创建的，因此它们将具有最少数量的多边形。而且实现弯曲四边形、三角形、法线和纹理坐标将非常困难（或不可能）。CSS3D的实现将受到很大的限制。我打算让人建模只使用四边形多边形。理论上，我希望放置一组四边多边形，让它们的x、y、z位置决定角度，所有东西都形成一个对象。谢谢更新。我通常是这类技术的后期采用者，但上面的信息足以让我开始走上一条更合适的道路。@DonBoots 3D frameworks允许您尽可能顺利地完成这一过渡。在这一点上，这个星球上没有人能够了解3d图形的一切——它太大太深了。但是，有了好的工具集，您可以逐渐学习新东西，并在某些复杂情况下依赖于框架的默认行为。 
 <body> 
   <h1>Hello X3DOM World</h1> 
   <x3d width="400" height="300"> 
     <scene> 
       <shape> 
         <box></box> 
      </shape> 
     </scene> 
   </x3d> 
 </body>