使用 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