基于HTML5的燃气3D培训仿真系统

最近上线了的基于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培训仿真系统,码迷,mamicode.com

时间: 2024-12-20 17:13:22

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

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

前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景,该 3D 场景从正面展示了一个地铁站的现实场景,包括地铁的实时运行情况,地铁上下行情况,视频监控,烟雾报警,电梯运行情况等等,帮助我们直观的了解当前的地铁站. 系统中

wwwlyjustcom基于HTML5快速搭建3D机房设备面板199O8836661

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟的设备是机房设备,先来目睹下最终效果: 基于HTML5快速搭建3D机房设备面板我来解释下这个模型,一个带有透明玻璃门的机柜,机柜里装有5台设备,门可以开合,设备可以插拔,那么我么该如何搭建这样的设备呢?方法不难,我们一步一步来.基于HTML5快速搭建3D机房设备面板看起来有模有样的,其实呢,它就是一

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

基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header class="cd-header"> <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a&

基于 HTML5 的 WebGL 3D 智能楼宇监控系统

前言 智能监控的领域已经涉及到了各大领域,工控.电信.电力.轨道交通.航天航空等等,为了减少人员的消耗,监控系统必不可少.之前我写过一篇 2D 的智能地铁监控系统广受好评,突然觉得,既然 2D 的这么受欢迎,那么 3D 的需求量肯定也是非常大的,3D 毕竟比 2D 来说还是更直观一些,于是有了这个例子以及这篇文章.智能监控系统在 3D 中应用比较广泛的除了 3D 机房以外,我觉得就是楼宇的监控了,可是之前做了很多关于机房方面的 Demo,所以最终决定做 3D 楼宇监控系统. 代码生成 场景搭建

基于 HTML5 + WebGL 的 3D 太阳系系统

前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间中那些原本遥不可及的事物离我们越来越近,人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度.站在更高的立足点上,作为人类这个物种中的一员,我们理所应当对我们生活的星球.所在的太阳系有一定的认识,对 8 大行星各自的运行轨道.质量.资源存储量甚至是地形有一定的了解. 本系统采用 Hightopo 的 H

基于 H5 + WebGL 实现 3D 可视化地铁系统

前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景,该 3D 场景从正面展示了一个地铁站的现实场景,包括地铁的实时运行情况,地铁上下行情况,视频监控,烟雾报警,电梯运行情况等等,帮助我们直观的了解当前的地铁站. 系统中

基于HTML5 WebGL实现3D飞机叶轮旋转

在上一篇<基于HT for Web矢量实现2D叶轮旋转>中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用. 在3D拓扑上可以创建各种各样的图元,在HT for Web系统中提供了一些常规的3D模型,但是对于那些比较复杂的模型,比如汽车.人物等模型就无能为力了,那再项目中需要用到这样的模型该肿么办呢?这时候就需要借助专业的3ds Max工具来建模了,然后通过3ds Max工具将模型导出成obj文件,然后再项目中引用导出的obj文件,这样就能成功的使用上复杂的图元了. 在

基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检

前言 这次为大家展示的是通过 HT for Web 灵活的图型化编辑工具打造的智慧隧道监控系统.通过 HTML5 技术实现了桌面和移动端的跨平台性,同时现实了可视化运维. 这次主要跟大家分享里面的漫游巡检功能,完美进行第一人称视角体验整体结构环境,酷似游戏一样给人一种真实的感受,比平面更加直观,随意游离与虚拟和现实之间. 代码实现 整个场景是由 3D 组件搭建而成的,需要大量的代码,为了简化,我用 HT 封装的 ht.JSONSerializer 来将场景序列化为一个 json 文件.在代码中,

基于 HTML5 WebGL 的 水泥工厂可视化系统

前言 如今的制造行业,基于数据进行生产策略制定与管理已经成为一种趋势,特别是 工业4.0 的浪潮下,数据战略已经成为很多制造企业的优先战略,而数据可视化以更直观的方式,帮助指导决策,成为数据分析传递信息的重要工具.通过数据可视化系统助力实现数据驱动的工业世界,为 工业4.0 提供更加灵活.敏捷.高效.个性化的数据支撑.今天就给大家带来一个采用 Hightopo 的 HT for Web 产品实现了一个水泥工厂可视化系统. 系统预览 本案例共有七个子系统: 数据概况 -- 展示全厂年月时间单位的各