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();

 

动画效果如下图：

 

 

 

 

数据驱动是借助TWaver的IOT平台完成的数据采集、分发、控制和数据绑定，这里就先不赘述了。感兴趣的朋友可以给我们发邮件：[e-mail], 多多交流和沟通想法和意见。