草庐IT

html - 将 OBJ 数据转换为 CSS3D

coder 2023-08-11 原文

我找到了一大堆公式，但什么都没有，但 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>

它将解析页面上的 标签并生成具有良好性能的适当的 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

关于html - 将 OBJ 数据转换为 CSS3D，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13315842/

CSS3Dhtml0.0noreferrersectioncss3d

有关html - 将 OBJ 数据转换为 CSS3D的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  4. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  5. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  6. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  9. ruby - Ruby 有 `Pair` 数据类型吗？ - 2

    有时我需要处理键/值数据。我不喜欢使用数组，因为它们在大小上没有限制(很容易不小心添加超过2个项目，而且您最终需要稍后验证大小)。此外，0和1的索引变成了魔数(MagicNumber)，并且在传达含义方面做得很差(“当我说0时，我的意思是head...”)。散列也不合适，因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题，但我很想知道:Ruby标准库是否已经带有这样一个类？ 最佳

  10. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

随机推荐