使用 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 的话效果应该要好很多):
使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型的更多相关文章
- flexpaper 开源轻量级的在浏览器上显示各种文档的组件
FlexPaper是一个开源轻量级的在浏览器上显示各种文档的组件,被设计用来与PDF2SWF一起使用, 使在Flex中显示PDF成为可能,而这个过程并无需PDF软件环境的支持.它可以被当做Flex的库 ...
- 在web浏览器上显示室内温度(nodeJs+arduino+socket.io)
上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...
- 动态创建div(鼠标放上显示二维码)
最近的微信大行其道.各个网站上都给出的微信验证码,进行手机扫描加入. 怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果. 1.首先制作好这样的图片,写css样式 <style ty ...
- 遇到一张jpg的图片打不开,ps打不开,fireworks,打不开,ie8浏览器上显示不了,其他的浏览器没问题
1.在photoshop上报错; 2.在fireworks上报错 3.ie8上 其他的图片都可以,就这张不可以,没发现什么不同的地方,都是jpg格式的呀,而且谷歌浏览器能显示出来; 处理方法: 1.选 ...
- NodeJs 设置跨域后页面全部变成了源码在浏览器上显示
百度搜索跨域后得到 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin" ...
- input框在浏览器上显示一个叉,去掉方法
/* 清除IE10及以上版本input的叉叉(X)和密码输入框的眼睛图标 */ input::-ms-clear { display: none; } input::-ms-reveal { disp ...
- tomcat服务器用Servlet类查找磁盘文件上的Json信息,如果匹配则在浏览器上显示出该条内容的全部信息
package com.swift; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.IOE ...
- input与select 设置相同宽高,在浏览器上却显示不一致,不整齐
遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input width,height 值里面, 不 ...
- 在手机的浏览器上通过连接打开App
Android系统中实现 1.在系统系统自带的浏览器中 首先做成HTML的页面,页面内容格式如下: <a href="[scheme]://[host]/[path]?[query]& ...
随机推荐
- CSS layout入门
元素与盒 在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的. 元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为 ...
- CSS构造模型
div 边距 边框 定位 浮动 21.1 div 部分(division)---<div>元素,经常以div形式引用---是XHTML元素,用于定义XHTML文件中的区域. 1.添加div ...
- HTTP 与 HTTPS 的区别
本文转自:http://www.cnblogs.com/ok-lanyan/archive/2012/07/14/2591204.html HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的 ...
- OO ALV 学习参考
http://blog.csdn.net/sapliumeng/article/details/18653491 一.ALV介绍 The ALV Grid Control (ALV = SAPLi ...
- js防刷新的倒计时
近期在维护考试系统,在进行考试測试时无意中点击了刷新button.可是上面的倒计时并没有受到影响.同一时候在几篇博客中也有这种样例,所以我想看看它究竟是如何防止刷新的. 假设是用cs代码写.我们可能会 ...
- hdu 5443 The Water Problem 线段树
The Water Problem Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php? ...
- 在Linux下安装C/C++开发工具包的最佳方式
假设你使用的是Fedora, Red Hat, CentOS, 或者 ScientificLinux 系统,使用以下的命令安装GNU的C/C++开发包和编译器. # yum groupinstall ...
- 教你如何选择Android游戏引擎
我们进行Android游戏开发时选择游戏引擎是必须的,但是该如何选择呢?哪个Android游戏引擎更加适合自己呢?本文就提供了三个游戏引擎的对比说明,阐述了它们各自的特点,为大家选择引擎提供了参照. ...
- 区域医疗移动医疗影像解决方案2--基于FLEX的PACS
基于Flex的PACS和基于HTML5的PACS,都不是基于DICOM的WADO的方式,即所有的图像操作,移动.缩放.旋转.测量.伪彩.窗宽窗位调整等都是在本地浏览器能够完成,不用和服务器进行频繁的交 ...
- c++ 怎样获取系统时间
c++ 怎样获取系统时间 2008-04-28 15:34 //方案— 长处:仅使用C标准库:缺点:仅仅能精确到秒级 #include <time.h> #include <stdi ...