使用 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 的话效果应该要好很多):

Attachments (2)

Download all attachments as: .zip

Comments

1. thinkbase -- 2013-02-03 00:19

关于 IE 支持 WebGL 的问题, 发现有一个插件 IEWebGL, 不确定具体的效果怎么样.

2. thinkbase -- 2013-02-04 02:15

在不同浏览器下的差异(在使用 Flash backend 时):

  • IE9: 鼠标移动可以正常加亮对应的 Box, 但是 Last highlightLast normalize 区域不会随之变化, 需要在加亮的 Box 上点击一下才会改变, 估计应该是 Flash 插件的差异(IE 使用的是 ActiveX 方式的 Flash 插件);
  • Firefox: "选择" 下拉框的 change 事件触发稍有区别, IE 和 Chrome, 只要使用上下按键改变选择项(在下拉框获得焦点但是未下拉的状态下)就会触发 change 事件, 但是 Firefox 在改变选择项后, 必须按 Enter 键, 或者将焦点移除, 才会触发 change 事件.
3. anonymous -- 2013-02-05 21:41

在 Chrome / WebGL 的方式下测试了一下, 总体来说和使用 Flash backend 表现一致, 当然 WebGL 下显示的效果更好.

另外, WebGL 没有 在 Flash backend 中, 执行'清除'之后 Box 的鼠标移动自动加亮位置不准确 的问题.