最近上线了的基于HTML5的燃气3D培训仿真系统，以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的，OSG引擎性能和渲染效果各方面还是不错的，但因为这次新产品需求要求能运行多移动终端，多年前基于MFC封装OSG的老系统架构也实在该退休了，这年头找能维护MFC这种古董级GUI的靠谱人也非易事。

系统最终采用HT for Web的3D框架实现，项目中的程序员也很高兴有这样的机会终于摆脱维护MFC老系统的宿命，虽然大家都只有C++的开发经验，对HTML/CSS/JS并不熟悉，但毕竟HT for Web已经做了极佳的组件封装，CSS和DOM、包括跨平台的兼容性等棘手问题交给HT框架透明处理，程序员只需要掌握基本的js用法就可以快速上手，按HT的说法类比与关系数据库ORM(Object-relational mapping)映射框架，HT提供的是OVM(Object-View mapping)的框架，只需要基本的面对对象的js操作即可驱动控制各种View组件，当然对于明白原理的人依然可以不受框架约束自如操作HTML的View层。

系统主要分为设备介绍、门站组装、业务培训和模拟考核四大部分：

让我感觉比较爽的是控制3D图元部分，以前不同的设备类型得体力活的写一堆代码，才能好不容易的实现些旋转移动等操作控制，界面控件和3D模型之间的数据同步也得费不少劲，现在用js这种动态语言真是非常灵活，界面都可以非常方面的动态生成，加上HT for Web统一的数据模型自动就能处理好3D图元与控件之间的数据绑定和联动，我干起活来就像搭积木一样轻松，脑子里想的就是业务功能和业务数据，不用再去折腾不同组件如何同步这些数据，控件也无需做什么特殊扩展。

当然目前项目还仅仅是初版移植，业务功能上还未有太大创新，但就目前的进度我们已经体会到HTML5的开发快速性，js语言也不是想象中那么弱，团队控制好一定的编码规范后js的灵活性带来的开发进度提高还是非常显著，刚开始选型大家还在争论OSG基于C++和OpenGL的性能会优于JS和WebGL的方案，但现在回头看我们还是走对路子了，毕竟我们这样的企业应用也不需要像游戏级别的渲染和性能的要求，产品发布轻量，开发可快速迭代更是我们需要追求的路线。

以下是一段平板上的操作视频供参考 http://v.youku.com/v_show/id_XNzA0NjE2MjY0.html

基于HTML5的燃气3D培训仿真系统的更多相关文章

  1. 基于 HTML5 + WebGL 实现 3D 可视化地铁系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...

  2. 基于 HTML5 WebGL 的 3D SCADA 主站系统

    这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 的模拟一般需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算是我对这次项 ...

  3. 基于VR技术的输电线路巡检仿真系统

    基于VR技术,搭建电力输电仿真系统用于培训,提供用户沉浸式学习体验.交互式操作体验,VR设备能够提供沉浸式真实感的模拟场景,使得输电线路巡检内容视觉化,跨越了空间和时间的限制,有针对性的解决传统输电运 ...

  4. 基于 HTML5 的 WebGL 3D 档案馆可视化管理系统

    前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...

  5. 基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用

    基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用 前言 在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接 ...

  6. 基于 HTML5 WebGL 的智慧楼宇可视化系统

    前言 可视化的智慧楼宇在 21 世纪是有急迫需求的,中国被世界称为"基建狂魔",全球高层建筑数量位居首位,所以对于楼宇的监控是必不可少.智慧楼宇可视化系统更多突出的是管理方面的功能 ...

  7. 基于html5顶部导航3D翻转展开特效

    基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header cla ...

  8. 基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统

    前言 大家好,老郑我又回来了.这一期为大家带来一个非常好玩的 demo,我们制作一套自己的 3D 管道控制系统,运用了( http://www.hightopo.com )HT 的 Graph3dVi ...

  9. 基于 HTML5 + WebGL 实现 3D 挖掘机系统

    前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...

随机推荐

  1. （转）TRANSFORM_TEX详解

    原创文章如需转载请注明:转载自风宇冲Unity3D教程学院 特别讲:常见问题回答   本讲会陆续补充一些问题的解答. 问: (1) TRANSFORM_TEX是做什么的 (2)float4 _Main ...

  2. Revit中如何自定义快捷键

    最佳的绘图方式是左手键盘,右手鼠标,使用快捷键将大大提高绘图效率,Revit同样提供了自定义绘图工具快捷键的功能(Revit2011及以后版本),有两种方式调出自定义快捷键窗口,第一种是Revit窗口 ...

  3. linux web服务器，防火墙iptables最简配置

    配置防火墙(服务器安全优化) 安全规划:开启 80  22 端口并 打开回路(回环地址 127.0.0.1) # iptables –P INPUT ACCEPT # iptables –P OUTP ...

  4. delphi使用outputdebugstring调试程序和写系统日志

    delphi使用outputdebugstring调试程序和写系统日志 procedure TForm1.btn1Click(Sender: TObject); begin OutputDebugSt ...

  5. GDAL 遥感图像处理后的数据保存为图像文件的实现方法

    在遥感图像处理中,GDAL库不仅能读取和处理大部分的遥感图像数据,而且还能够实现图像处理后将数据保存为图像的功能. 本文就详细介绍如何将内存中的图像数据保存为.tif格式. 首先,遥感数据处理完,保存 ...

  6. Apache Storm 的历史及经验教训——Nathan Marz【翻译】

    英文原文地址 中英文对照地址 History of Apache Storm and lessons learned --项目创建者 Nathan Marz Apache Storm 最近成为了ASF ...

  7. Cocos2d中使用颜色混合：加算，减算

    转自http://blog.sina.com.cn/s/blog_7a2ffd5c0100xtid.html CCSprite有一个ccBlendFunc类型的blendFunc_结构体成员,可以用来 ...

  8. Codeforces Round #182 (Div. 1)题解【ABCD】

    Codeforces Round #182 (Div. 1)题解 A题:Yaroslav and Sequence1 题意: 给你\(2*n+1\)个元素,你每次可以进行无数种操作,每次操作必须选择其 ...

  9. Java 中类的加载顺序

    如果类A和类B中有静态变量,静态语句块,非静态变量,非静态语句块,构造函数,静态方法,非静态方法,同时类A继承类B,请问当实例化A时,类内部的加载顺序是什么? 测试代码如下: Class B: pub ...

  10. qt下调用win32api 修改分辨率

    在头文件中添加 #include <window.h> DEVMODE DevMode; EnumDisplaySettings(NULL, ENUM_CURRENT_SETTINGS, ...