使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型

如果需要在浏览器上显示 3D 画面的话, 现在一般会使用 WebGL, 典型的例如 three.js(http://mrdoob.github.com/three.js/), 但是 WebGL 对浏览器版本以及显卡的要求比较高, 很多客户端无法正常使用 ———— 当然现在新买的机器是毫无压力的.

后来在网上查找到了 X3DOM(http://www.x3dom.org/), 通过使用不同的后端(backend), X3DOM 可以兼容较低版本的浏览器(主要是指 IE 系列), 也可以在没有显卡支持的情况下运行, 常用的非 WebGL 后端是 Adobe Flash Player 11, IE 也可以通过使用 Google Chrome Frame 实现对 WebGL 的支持, 注意 Flash 11 以下的版本是不能正常运行的.

X3DOM 通过在标准的 HTML5 DOM 中加入 X3D 格式的 XML 元素, 实现将 X3D 格式的 3D 模型嵌入到 HTML 页面的功能; 在 http://www.x3dom.org/ 网站上有丰富的示例以及较详细的文档, 不过彻底搞懂估计需要一些 3D 建模的知识, 比如 fieldOfView 这样的专业术语.

另外 web3D Consortium 也有大量关于 X3D 的资料, 尤其是 X3D tooltips(http://www.web3d.org/x3d/content/X3dTooltips.html), 是一份全面的 X3D 节点元素速查手册(有中文版)(不知道为什么 www.web3d.org 被 GWF 了, 如果要下载也可以到这里);

在初步了解 x3dom 的基础上, 以显示货物装箱为例, 对 x3dom 进行了简单的封装, 重点关注 货物在集装箱等容器中的堆放方式的显示, 可以实现以 "Box" 的方式加入不同尺寸的货物(长方体), 以不同的角度查看堆放情况, 以及对这些长方体的选择/加亮显示等等, 具体代码可以到 https://github.com/thinkbase/dev-thinkbase.net/tree/master/.research/x3dom-container-fill 下载, 注意测试用的 html 文件不能直接在本地打开, 必须部署到 HTTP 服务器上才能正常运行; 如果不想麻烦的话，在这里可以看到在线演示.

实际显示的效果如下图所示(使用 Flash backend 的效果, 如果系统支持 WebGL 的话效果应该要好很多):

Posted: 2013-02-03 00:14 (Updated: 2013-06-27 22:17)
作者: thinkbase
Categories: webgl javascript x3d x3dom 3D VRML

转载于:https://www.cnblogs.com/thinkbase/p/WebGL-on-x3dom.html

使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型相关推荐

Django在浏览器上显示本地图片
Django项目在浏览器上显示本地图片,关键在于url的配置. 代码如下: from django.views.static import serve url(r'^book/(?P<path& ...
用STC单片机在TFT屏上显示二维码
用STC8A单片机在TFT屏上显示二维码概述最近项目需要用单片机在TFT屏上显示二维码,将C++下显示二维码的代码经过改造,移值到C代码的单片机,成功运行,经多次测试能稳定运行,TFT屏显示部分, ...
如何在浏览器上跑深度学习模型？并且一行JS代码都不用写
翻译 | 林椿眄编辑 | 周翔 2017 年 8 月,华盛顿大学的陈天奇团队发布了 TVM,和 NNVM 一起组成深度学习到各种硬件的完整优化工具链,支持手机.CUDA.OpenCL.Metal.J ...
在web浏览器上显示室内温度（nodeJs+arduino+socket.io）
上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...
在浏览器上显示不同分辨率和不同手机型号
1.在goole浏览器上如何显示不同分辨率按F12,将控制显示在浏览器的右侧,拖动右侧或下端的滚动条,再根据右上角显示的分辨率,来调整你所需要的分辨. 2.goole浏览器上如何显示不同手机型号同 ...
使用Fiori BarcodeScannerButton在浏览器上扫描二维码和条形码
BarcodeScannerButton 现在支持浏览器上使用,不过有版本要求,见下面的note:https://launchpad.support.sap.com/#/notes/2992772 ...
QReader：Chrome 浏览器上的二维码阅读器
在 Chrome 上利用扩展生成二维码不稀奇, QR Code Generator 这个扩展就可以实现,并且这样的扩展在 Chrome Web Store 随便一搜都能出现一大堆.但是,直接在 Chr ...
Servlet-Response直接返回一个文件并且在浏览器上显示
有时你需要在页面上显示一个文件的内容,比如PDF @ResponseBody@GetMapping("/mm")public NocResult mm(HttpServletRes ...
Unity发布PC平台，接入微信开放平台网页应用，扫码登录不拉起浏览器直接显示二维码在UI上
文章目录一.前言二.登录微信开放平台,申请网页应用三.抓取授权二维码原理四.测试五.核心代码六.补充:如何知道用户扫码成功一.前言 Unity发布PC平台,如果在PC平台想要使用微信登录 ...

使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型

使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型相关推荐

最新文章

热门文章