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