如果需要在浏览器上显示 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 的话效果应该要好很多):


使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型的更多相关文章

  1. flexpaper 开源轻量级的在浏览器上显示各种文档的组件

    FlexPaper是一个开源轻量级的在浏览器上显示各种文档的组件,被设计用来与PDF2SWF一起使用, 使在Flex中显示PDF成为可能,而这个过程并无需PDF软件环境的支持.它可以被当做Flex的库 ...

  2. 在web浏览器上显示室内温度(nodeJs+arduino+socket.io)

    上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...

  3. 动态创建div(鼠标放上显示二维码)

    最近的微信大行其道.各个网站上都给出的微信验证码,进行手机扫描加入. 怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果. 1.首先制作好这样的图片,写css样式 <style ty ...

  4. 遇到一张jpg的图片打不开,ps打不开,fireworks,打不开,ie8浏览器上显示不了,其他的浏览器没问题

    1.在photoshop上报错; 2.在fireworks上报错 3.ie8上 其他的图片都可以,就这张不可以,没发现什么不同的地方,都是jpg格式的呀,而且谷歌浏览器能显示出来; 处理方法: 1.选 ...

  5. NodeJs 设置跨域后页面全部变成了源码在浏览器上显示

    百度搜索跨域后得到 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin" ...

  6. input框在浏览器上显示一个叉,去掉方法

    /* 清除IE10及以上版本input的叉叉(X)和密码输入框的眼睛图标 */ input::-ms-clear { display: none; } input::-ms-reveal { disp ...

  7. tomcat服务器用Servlet类查找磁盘文件上的Json信息,如果匹配则在浏览器上显示出该条内容的全部信息

    package com.swift; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.IOE ...

  8. input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

    遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input   width,height 值里面, 不 ...

  9. 在手机的浏览器上通过连接打开App

    Android系统中实现 1.在系统系统自带的浏览器中 首先做成HTML的页面,页面内容格式如下: <a href="[scheme]://[host]/[path]?[query]& ...

随机推荐

  1. CSS layout入门

    元素与盒 在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的. 元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为 ...

  2. CSS构造模型

    div 边距 边框 定位 浮动 21.1 div 部分(division)---<div>元素,经常以div形式引用---是XHTML元素,用于定义XHTML文件中的区域. 1.添加div ...

  3. HTTP 与 HTTPS 的区别

    本文转自:http://www.cnblogs.com/ok-lanyan/archive/2012/07/14/2591204.html HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的 ...

  4. OO ALV 学习参考

      http://blog.csdn.net/sapliumeng/article/details/18653491 一.ALV介绍 The ALV Grid Control (ALV = SAPLi ...

  5. js防刷新的倒计时

    近期在维护考试系统,在进行考试測试时无意中点击了刷新button.可是上面的倒计时并没有受到影响.同一时候在几篇博客中也有这种样例,所以我想看看它究竟是如何防止刷新的. 假设是用cs代码写.我们可能会 ...

  6. hdu 5443 The Water Problem 线段树

    The Water Problem Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php? ...

  7. 在Linux下安装C/C++开发工具包的最佳方式

    假设你使用的是Fedora, Red Hat, CentOS, 或者 ScientificLinux 系统,使用以下的命令安装GNU的C/C++开发包和编译器. # yum groupinstall ...

  8. 教你如何选择Android游戏引擎

    我们进行Android游戏开发时选择游戏引擎是必须的,但是该如何选择呢?哪个Android游戏引擎更加适合自己呢?本文就提供了三个游戏引擎的对比说明,阐述了它们各自的特点,为大家选择引擎提供了参照. ...

  9. 区域医疗移动医疗影像解决方案2--基于FLEX的PACS

    基于Flex的PACS和基于HTML5的PACS,都不是基于DICOM的WADO的方式,即所有的图像操作,移动.缩放.旋转.测量.伪彩.窗宽窗位调整等都是在本地浏览器能够完成,不用和服务器进行频繁的交 ...

  10. c++ 怎样获取系统时间

    c++ 怎样获取系统时间 2008-04-28 15:34 //方案— 长处:仅使用C标准库:缺点:仅仅能精确到秒级 #include <time.h> #include <stdi ...