html5 监控,基于 HTML5 的 WebGL 3D 智能楼宇监控系统
前言
智能监控的领域已经涉及到了各大领域,工控、电信、电力、轨道交通、航天航空等等,为了减少人员的消耗,监控系统必不可少。之前我写过一篇 2D 的智能地铁监控系统广受好评,突然觉得,既然 2D 的这么受欢迎,那么 3D 的需求量肯定也是非常大的,3D 毕竟比 2D 来说还是更直观一些,于是有了这个例子以及这篇文章。智能监控系统在 3D 中应用比较广泛的除了 3D 机房以外,我觉得就是楼宇的监控了,可是之前做了很多关于机房方面的 Demo,所以最终决定做 3D 楼宇监控系统。
代码生成
场景搭建
整个场景是由 HT for Web(http://hightopo.com/) 的 3D 组件搭建而成,配合左侧的 listView 列表组件,通过点击这个 listView 列表组件中的各个项可以自由切换各个监控楼层和楼宇的场景:
dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);
relativeLayout = new ht.ui.RelativeLayout();// 相对布局器 可对界面进行布局
var ht3dView = new ht.ui.HTView(g3d);// 放置 3d 组件
relativeLayout.addView(ht3dView, {// 给相对布局器添加组件显示,参数一为组件名称,参数二可设置宽高、对齐方式等属性
width: 'match_parent',
height: 'match_parent'
});
var listView = window.list = new ht.ui.ListView();// 列表组件
for (var i = 1; i <= 15; i++) {
var data = new ht.Data();// 创建节点
data.setName('楼层' + i);// 设置节点名称
listView.dm().add(data);// 将节点添加进列表组件中
}
relativeLayout.addView(listView, {// 将 listView 组件添加进布局器中
align: 'left',// 设置对齐方式为左对齐
vAlign: 'top',// 设置垂直对齐方式为顶部对齐
marginTop: 120,// 设置外边距顶部为 120 像素
marginLeft: 60,// 设置外边距左侧为 60 像素
width: 80,// 设置宽度为 80
height: 480,// 设置高度为 480
index: 100// 设置元素的堆叠顺序
});
relativeLayout.addToDOM();// 将组件添加进 body 中
加载模型
进入页面显示的就是整个城市的场景,通过 ht.Default.loadObj 方法加载 obj 模型:
var loadCity = function(){
ht.Default.loadObj('obj/city.obj', 'obj/city.mtl', {// 加载模型
center: true,// 模型是否居中,默认为false,设置为true则会移动模型位置使其内容居中
cube: true,// 是否将模型缩放到单位1的尺寸范围内,默认为false
prefix: 'obj/',// 图片路径前缀,即在map_kd值之前增加的前缀,如果是相对路径则以加载obj的html页面的路径为参考
shape3d: 'city',// 如果指定了shape3d名称,则HT将自动将加载解析后的所有材质模型构建成数组的方式,以该名称进行注册
finishFunc: function(modelMap, array, rawS3){// 用于加载 obj 模型后的回调处理
city.rawS3 = rawS3;// 设置变量 city 对象的 rawS3 属性 此函数中的 rawS3 属性为 obj 模型的原始大小
showCity();// 创建一个节点 设置节点的 shape3d 为 city 显示 city.obj 与 city.mtl 的内容
}
});
}
工控楼层模型的加载也是类似,这里就不再赘述。
直接将组件添加进场景中是不会有相关的操作的, 必须要监听事件的触发才可进行后续的操作,这里对数据选中容器中的选中变化事件进行监听:
//列表点击
listView.dm().sm().ms(function(e){// 监听选中变化事件
if (e.kind === 'set') {// 设置监听事件
showFloor();// 显示楼层
}
});
调用模型
这里为了简单就只设置了一个工控楼层的 obj 模型,通过调用不同的 obj 模型可以显示不同的工控楼层场景,也就是说我们可以自己通过 ht.Default.loadObj 方法加载模型,设置工控楼层模型的 shape3d 属性,然后设置到节点的 shape3d 属性上,即可修改;或者直接设置节点的 shape3d 属性为 json 格式的 obj 文件,这里还是采取第一种方式:
var showFloor = function(){
g3d.setCenter([210, 0, 210]);// 设置 3d 组件的“中心”位置
dm.clear();// 清除数据容器中的所有节点
var rawS3 = floor.rawS3,// 获取 obj 模型的原始大小
node = new ht.Node();// 创建一个新的节点
node.s({// 设置节点的样式属性
'shape3d': 'floor',// 此项设置的值为 ht.Default.loadObj 中设置的 shape3d 属性的值
'wf.visible': 'selected',// 设置选中节点时显示节点外部的线框
'3d.selectable': false// 设置节点不可选中
});
node.s3(rawS3[0] / 10,rawS3[1]/ 10,rawS3[2] / 10);// 设置节点的大小为原始大小的十分之一
node.p3(140, 0, 230);// 设置节点的位置
dm.add(node);// 将节点添加进数据容器中
// 添加四个“相机”的节点
createNode([0, 20, 0]);
createNode([110, 20, 220]);
createNode([330, 20, 420]);
createNode([210, 20, 120]);
createNode([420, 20, 120]);
};
这里顺便说一下另一种简便的调用 obj 模型的方式,直接设置节点的 shape3d 属性为导入的 json 格式的文件:
var node = new ht.Node();
node.s("shape3d", "./symbols/city.json");
但是这个 json 的内容必须要有以下几个元素:
{
"modelType": "obj",// 必须设置此属性为 obj 格式
"obj": "./obj/city.obj",// 必须设置 obj 属性
"mtl": "./obj/city.mtl"// 此项可写可不写,如果需要设置 obj 模型的样式(如颜色等),则必须设置此项
}
但是这种模式不适用于这个场景,因为我的模型有些大,需要调用到 obj 模型的原始大小 rawS3 属性除以一定比例后再显示。
创建面片
上面提到了 createNode 方法,这个方法主要是用来创建显示为“面片”类型的节点。所谓“面片”,即为只有一个面。通过这种在一个面上显示一张矢量图的方式,结果会比在一个六面体上显示一张图的性能好,3D 场景简单的时候可能看不出来效果,如果场景卡顿,立马就能看出“面片”的优势了:
function createNode(p3, s3){
var node = new ht.Node();// 创建一个新的节点
node.p3(p3);// 设置节点的位置
// node.s3(s3);
node.s({
'shape3d': 'billboard',// 设置节点的 shape3d 类型为 billboard 类型,显示为“面片”
'shape3d.image': './symbols/智能楼宇/camera.json',// 3d图形整体贴图
'shape3d.image.cache' : true,// 如果贴图是矢量,是否缓存(缓存后性能会得到提升)
'shape3d.autorotate': true,// 是否自动朝向相机
'shape3d.transparent': true,// 决定3d图形是否透明
// 'shape3d.alwaysOnTop': true,// 是否总是在最前
'shape3d.fixSizeOnScreen': [ 38, 47 ]// 是否无论缩放远近,在屏幕内呈现固定大小,值可为true(使用图片或矢量自身大小)/false, 也可以是[100, 200](对应宽高)
});
dm.add(node);// 将节点添加进数据容器中
g3d.invalidateShape3dCachedImage(node);// cache 的代价是,这里需要更新
return node;
}
事件交互
然后我就在想,既然到了楼层的 3D 模型显示,那么怎么返回?以哪种方式返回最好?想来想去比较没有违和感的还是点击列表组件比较好,就选中了列表组件的顶部:
listView.getView().addEventListener('click', function(e){// 监听点击事件
e.preventDefault();// 阻止默认操作
if (e.clientY - 120 < 50) {
showCity();// 显示初始 3D 楼宇场景
listView.dm().sm().cs();// 列表设置清除所有选中元素
}
});
所有代码结束!
总结
这个 3D 智能楼宇监控系统非常的简单,对于技术人员来说是完全没有挑战性的,主要工作内容在美工上,这么一来,如果要添加比较复杂的需求,技术人员就可以全身心地投入到产品上,而不是一些繁琐的 3D 模型的搭建了。总而言之,我觉得这个 Demo 非常具有代表性,所以想拿出来跟大家分享一下,一起讨论一下前端的趋势所在。
html5 监控,基于 HTML5 的 WebGL 3D 智能楼宇监控系统相关推荐
- 基于Wio Terminal的简易智能家居中控系统(初代版本)
经过不断地踩坑(学习),初代的简易智能家居中控系统已经做好了,在申请项目时填写的功能都做出来了,但是有些功能不是用Wio Terminal实现的(一方面是因为代码量太大,会给Wio Terminal的 ...
- 基于MQTT服务的校园智能灯杆系统的设计与实现
基于MQTT服务的校园智能灯杆系统的设计与实现 (本科毕设项目,所使用的工具基本都是我现学的) 项目完成的主要功能: 在实现现有灯杆功能(照明,视频监控)的基础上,增加智能灯控.环境数据采集.电子信息 ...
- 智能楼宇节能系统怎么样?设计该怎样做?
随着越来越多的智能楼宇出现,针对这些智能楼宇而研发的楼宇节能系统也是越来越丰富,设计上所带来的功能是在肉眼可见的进步中,对能耗节能做的是越来越完善.目前的智能楼宇节能系统,集结构.系统.服务.管理及它 ...
- html5 光影效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果
原标题:基于 HTML5 WebGL 的 3D 场景中的灯光效果 构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观又代表性 ...
- html楼层效果,基于 HTML5 WebGL 的智慧楼宇可视化系统
前言 可视化的智慧楼宇在 21 世纪是有急迫需求的,中国被世界称为"基建狂魔",全球高层建筑数量位居首位,所以对于楼宇的监控是必不可少.智慧楼宇可视化系统更多突出的是管理方面的功能 ...
- 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)
今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 De ...
- 信息系html5论文,基于HTML5的智力游戏设计电子信息工程本科学生毕业论文.doc
基于HTML5的智力游戏设计电子信息工程本科学生毕业论文 本科学生毕业论文(设计) 题目(中文):基于HTML5的智力游戏设计 (英文):Design of Intelligent Game Base ...
- html5 can,基于html5 can-vas实现漫天飞雪效果实例
本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法,运行该实例可以看到很棒的下雪效果.如下图所示: 主要代码如下:代码如下:ttp://www.w3.org/TR/xhtml1/DTD/ ...
- android wifi视频监控软件,WiFi环境下Android智能视频监控系统研究与实现
摘要: 在互联网飞速发展和移动互联网强势崛起的时代,科技产品服务于普通生活是新兴行业必然的发展趋势;监控系统是物联网时代各个领域必然争取的可控制系统.随着无线技术和移动终端设备的高歌猛进,移动终端智能 ...
- 基于Java+Dubbo设计的智能公交查询系统
一.项目背景 随着经济的飞速发展,人们的生活质量有了较大的提高,城市居民的出行变得越来越频繁,城市交通也面临越来越多的挑战.城市公共交通具有客流量大.成本低.效率高.节约资源等优势,因此,如何大力发展 ...
最新文章
- iOS 动画之CoreAnimation(CALayer)
- undistortPoints()函数用法总结
- 2018年首单!基石资本成功发行了双创债 募集3.1亿元
- Font Awesome一套绝佳的图标字体库和CSS框架的使用
- PHPstorm相同变量标识
- TMS320F28335之GPIO原理
- [Jarvis OJ - PWN]——Backdoor
- iOS NSURLCache
- java架构师眼中的高并发架构
- 栈一:用两个栈实现队列
- php 判断下载状态,php下获取http状态的实现代码
- python3集合(set)
- gtx780有html接口吗,笔记本玩转游戏大作 达人外接GTX780Ti
- eZ Publish 的 Site.INI文件的中文翻译
- Java equalsIgnoreCase() 方法
- 【PS】免费 使用PS批量将pdf转换成图片 pdf转图片 pdf转jpg pdf转png
- c语言求最小值函数min的用法,C语言--min的宏定义
- 打造舒适搬砖环境,这些是我最想推介的桌面好物
- 信用评分模型中的滚动率分析
- Linux-磁盘扩容(逻辑卷方式)