`

HTML5 3D水源监控系统

阅读更多

天津港爆炸事件后,除了安置群众、追究事故责任外,人们最关心的莫过于爆炸污染物对于周边环境的影响,其中最重要的一块就是饮用水的安全。所幸的是,水源的安全监测是实实在在有据可依的。环保单位和供水企业在建设自己的饮用水水源监控系统,实时的监控民生水源安全。

 

最近我们承接了一个水源地自动化监控系统的项目。由于水源地一般都会远离生产、生活区,例如各地的水库、地下水、井等,派驻人员实时进入水源腹地进行数据监测,是不实际的,为了增强监测的实效性,远程的自动化水源监控系统是必不可少的。该系统除了能够监控各种水质指标外,还可以远程监测水源井的工作情况,远程监控水泵工作状态,同时还可以将监测指标以图形显示方式发布到各级监管单位或者管理领导的工作平台或者移动工作终端(平板、手机等)。

 

自动化监控产品并不少见,这次项目真正吸引客户眼球的是3D呈现效果。以往的监控系统都是以平面的方式来呈现,例如下图:


 

或者是这样的假3D效果:


 

传统的平面方式除了越来越难以满足客户日渐提高的要求之外,的确也难以直观展现出水源井结构、泵体安装位置和工作状态。3D模型本身不具备交互功能,通常需要做大量的开发工作,并且需要在系统中安装插件。这次的项目,我们采用了TWaver 3D开发平台,结合TWaver IOT平台完成了模型构建和数据驱动,不但实现了监控场景的3D化,还能同步显示各类监控指标,让调度、管理人员对于水源井的水质和工作情况一目了然,提升了管理效率,并能有效增强各级工作的服务质量。

 

上一张手持设备截图:

 

这不是一张死图,而是可以旋转、拖拽、可交互的3D场景,水位的高低、阀门的开关,都会根据实际采集上的数据变化。水源井模型包含了以下部分:井、泵,传感器、阀门和管道。模型的构建可以通过直接导入3D文件,或者用TWaver Mono Design建模工具生成。

 

例如,我们找美工mm在3DMax中,对泵进行建模后导出obj文件,引入到场景中:

 

{
       type: 'obj',
       src: 'pump',
       size: [100,200,100],
       translate: [320,-380,80],
       rotation: [0, 90, 0],
       specularStrength: 4,
       color: '#FF1700',
},
loadObj: function(box, json){
var loader = new mono.OBJMTLLoader();
varsrc = json.src;
var size = json.size;
varpos = json.translate;
var style = json.style;
var rotation = json.rotation;
 
loader.load("images/"+src+".obj", "images/"+src+".mtl", json.images || "", function (object) {
var bb = object.getBoundingBoxWithChildren();
var max = bb.max, min = bb.min, w = max.x - min.x, h = max.y-min.y, l = max.z - min.z;
object.getDescendants().forEach(function(child, i){
child.setEditable(false);
 
        });
box.addByDescendant(object);
object.setPosition(pos[0],pos[1],pos[2]);
varos = {'x': w,'y':h,'z':l};
object.setScale(size[0]/os.x,size[1]/os.y,size[2]/os.z);
if(style){
                     object.s(style);
              }
       if(rotation){
              var f = demo.Util.getArc;
              object.setRotation(f(rotation[0]), f(rotation[1]), f(rotation[2]));
           }
      
    });
},

 

 大致如下图所示:



 

对于较为简单的阀门对象,我们使用了自己的MONO Design编辑器,可视化构建了阀门模型,并转换为相关JSON文件:

 

 

{
	type: 'mono',
	url: 'resource/yali.json',
	scale: [0.5,0.5,0.5],
	translate: [-250, -155,0],
	rotation: [0, -90, 0],
},
well.Default.registerFilter('mono', function(box, json){
	
initModelLib();
	mono.Toolkits.loadTemplateUrl(box, json.url, null, null, function(object){
		
		var translate = json.translate;
	object.setPosition(translate[0], translate[1], translate[2]);
	var scale = json.scale;
	if(scale){
		object.setScale(scale[0], scale[1], scale[2]);
	    }
	var rotation = json.rotation;
	if(rotation){
		var f = demo.Util.getArc;
		object.setRotation(f(rotation[0]), f(rotation[1]), f(rotation[2]));
	    }
	if(json.color){
		object.getDescendants().forEach(function(child){	
child.s({
		'm.color': json.color,
	'm.ambient': json.color,
			});

        });
	    }
	});
});

 

阀门的模型:



 

 

对于井体对象,由于其结构较为简单,并且用户也很关注该井体的环境结构,我们直接使用TWaver3D的API代码来生成模型,并采用了光照贴图等技术来增强其环境效果。

 

{
		type: 'cable',
		color: '#BEC9BE',
		direction: 0.05,
		repeat: [10,1],
		data:[
			[-320, -180, 0],
			[800, -180, 0],
			[800, -1200, 0],
			[1500, -1200, 0],
		],
	},
well.Default.registerFilter('cable', function(box, json){		
	var path = demo.Default.create3DPath(json.data);
	path = mono.PathNode.prototype.adjustPath(path, 5);
	var cable=new mono.PathNode(path, 100, 10);
	var repeat = json.repeat || [10,1];

	cable.s({
		'm.type': 'phong',
		'm.specularStrength': 4,
		'm.color': json.color,
		'm.ambient': json.color, 		
		'm.texture.image': 'images/w002.jpg',
		'm.texture.repeat': new mono.Vec2(repeat[0], repeat[1]),
		'm.texture.offset': new mono.Vec2(0,0.7),
	});
	cable.setClient('flow', json.flow);
	cable.setStartCap('plain');
	cable.setEndCap('plain');
	box.add(cable);
});

 

场景中水管都是通过API方式创建的,其中罐体、水位、挡板这些模型涉及到模型的加减,通过mono design或API都可以生成。

 

 

静态模型和场景搭建完毕后,通过TWaver的IOT平台完成了境内采集数据的绑定,已经可以用实时数据来驱动场景中的对象了。用户希望能有更加逼真的交互效果,希望我们能增加一些动画支持。水的流动,泵的启停,水位的升降这些动作使用水井内的工作状态更形象逼真。

 

 

下面是模型的动画的使用方式举例:

 

varoffsetAnimate = new twaver.Animate({
		from: 0 ,
		to: 1,
		type: 'number',
		dur: 3000,
		repeat:Number.POSITIVE_INFINITY,
		reverse: false,
		onUpdate: function(value){
			cable.s({
				'm.texture.offset': new mono.Vec2(value, 0),
			});
		},
	});
	offsetAnimate.play();

 

动画效果如下图:

 

 

 

 

数据驱动是借助TWaverIOT平台完成的数据采集、分发、控制和数据绑定,这里就先不赘述了。感兴趣的朋友可以给我们发邮件:tw-service@servasoft.com, 多多交流和沟通想法和意见。

 

  • 大小: 1.5 MB
  • 大小: 15.7 KB
  • 大小: 58.4 KB
  • 大小: 396 KB
  • 大小: 478.4 KB
  • 大小: 6.4 MB
  • 大小: 53.8 KB
  • 大小: 27.5 KB
分享到:
评论

相关推荐

    智能水源地水质监测系统设计——本科论文

    本文所研究的水源地监测系统,具有自动适配水、异常提示预警、智能分析、远程通信等功能,极大地提高了水源地监控、预警的能力,对于淡水的循环利用具有重要的意义。

    消防水源监测系统解决方案.doc

    消防水源监测系统是一种现代化的消防安全保障措施,它利用先进的物联网技术对消防水源的状态进行实时监控,确保在紧急情况下能够提供有效的灭火支持。该系统主要由以下几个核心部分组成: 1. **水位计**:用于监测...

    远程无线水源井群监控系统设计

    水源井群具有分布面广、地理位置偏僻分散、远离调度中心等特点,但水源井管理复杂、难度大,其传统监控系统存在信息量少、实时性差、效率低、可靠性差、自动化程度低等问题。依托GPRS网络平台,综合应用PLC、Web网络...

    基于LabVIEW的远程水源监测系统设计

    针对热电厂供水系统运行的安全性和稳定性需求,提出一种利用LabVIEW虚拟仪器技术的电厂水源监测系统。该系统应用LabVIEW虚拟仪器软件,可完成实时数据监测、参数超限报警以及系统用户管理功能,同时采用LabVIEW软件自带...

    城市消防水源管理系统需求分析报告V1.1.doc

    城市消防水源管理系统的主要目标可能是实现对城市内各种消防水源(如消防水池、消火栓、天然水源等)的实时监控、数据采集、状态评估和调度指挥。系统可能包含以下功能模块: 1. **信息管理**:收集并存储消防水源...

    项目水源热泵地下水资源监测系统实施策划方案

    ### 项目水源热泵地下水资源监测系统实施策划方案 #### 一、综述 ##### 1.1 实施方案的建设背景 随着社会经济的发展,建筑能耗已成为能源消耗的重要组成部分,其中水源热泵作为一种高效利用地热能的技术手段,在...

    水源地视频监控方案.pdf

    水源地视频监控方案是指在水源地区域内实施视频监控系统,以确保水源地的安全和稳定运行。该方案涵盖了项目背景、业务概述、设计目标和原则、技术方案等方面的内容。 一、项目背景 水源地视频监控方案的实施背景是...

    智慧消防水源系统解决方案

    智慧消防水源系统解决方案是现代消防领域的一个重要发展方向,它利用先进的信息技术、物联网技术和大数据分析,对消防水源进行实时监控和智能管理,以提高火灾防控和应急救援的能力。本方案旨在解决传统消防水源管理...

    行业分类-物理装置-一种水位检测装置和地源热泵系统水源井水位监测系统.zip

    标题中的“行业分类-物理装置-一种水位检测装置和地源热泵系统水源井水位监测系统”表明,这个压缩包文件包含了关于水位检测技术在地源热泵系统中的应用。地源热泵系统是一种高效节能的空调与供热系统,它利用地下水...

    研华自动化产品在水源井远程监控系统中的应用.rar

    标题中的“研华自动化产品在水源井远程监控系统中的应用”揭示了本次讨论的核心主题,即研华公司的自动化产品如何被用于实现对水源井的远程监控。研华是一家知名的工控设备供应商,其产品广泛应用于各种自动化系统,...

    基于灰色系统关联分析的矿井突水水源判别

    为了探究岱庄煤矿下组煤首采工作面掘进迎头突水水源,根据该面相关地质资料,并结合不同时间所取水样的水质化验结果,运用灰色系统理论中的关联分析法对该面掘进迎头突水点的水质资料进行分析计算,并分单一水源和混合...

    基于OPC技术的水源地网络监控系统设计.rar

    标题中的“基于OPC技术的水源地网络监控系统设计”是指使用OPC(OLE for Process Control)技术来构建一个能够远程监测和控制水源地环境和设备的系统。OPC技术是一种标准接口,允许不同的自动化设备和软件之间进行...

    黄浦江水源水质监控与预警系统研究及应用参考.pdf

    最后,通过对历史数据的分析,如王磊、邓文怡、刘国忠关于环境水质远程自动监测系统的研究,以及乐林生、鲍士荣、陈国光对黄浦江上游原水水质特征的探讨,系统可以建立长期的水质变化模型,识别季节性或周期性的水质...

    地表水水源热泵系统运行管理教材.doc

    《地表水水源热泵系统运行管理教材》是针对地表水水源热泵系统的操作、维护及管理的专业指导文件,旨在确保系统高效、安全、稳定运行。本规程由重庆市建设委员会发布,适用于各类采用地表水作为冷热源的水源热泵系统...

    网络游戏-基于无线网络的矿山水源井群监控系统.zip

    【标题】: "网络游戏-基于无线网络的矿山水源井群监控系统" 在这个主题中,我们探讨的是一个结合了网络游戏元素的创新应用——基于无线网络的矿山水源井群监控系统。这个系统的设计目的是为了提高矿业安全生产水平...

Global site tag (gtag.js) - Google Analytics