物联网3D，物业基础设施3D运维，使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇，智慧园区，3D园区、3D物业设施，3D楼宇管理系统——第八课

物联网3D，物业基础设施3D运维，使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇，智慧园区，3D园区、3D物业设施，3D楼宇管理系统——第八课

写在前面的废话：

很久没有更新文章了，这段时间一直忙于项目落地，虽然很忙，但是感觉没有总结，没有提炼的日子，总是让人感觉飘飘忽忽的。

所幸放下一些事，抽出一些时间，把近期的项目做一些整理与记录。也算是阶段性的收拾过去，整装再发吧。

作为程序员嘛，总要整理整理自己的，不管是知识储备，还是项目应用，亦或者生活种种，都要隔一段时间，整理一下，这样心不会乱，回首亦有节点。

序：

今天要讲解的课程是《物联网3D，使用webgl(three.js)与物联网设备监控运维展示》课程之物业基础设施3D运维篇。

首先我们描述一下概念：

物联网3D：物联网相比这些年来，大家都了解很多了，直白的讲，就是万物互联，万物上网。那么这里的物联网3D就是指通过三维可视化的方式展现物联网监控设备。对设备的位置信息，状态信息能一目了然。面向IT设施和资源的一体化综合监控与远程操控方式。通过三维可视化方式展现，解决监控资源繁多、开源工具使用复杂、问题定位困难等问题。

物业基础设施运维：物业基础设施包括了供配电、给排水、梯控、监控视频、暖通空调、门禁道闸、停车场道闸、照明、消防、周界环境等待各大门类，伴随着物业基础设施设备先进性、智能性、复杂性的增加，传统依靠人工巡检 和 主观判断的运维管理方式，以养为先 的维护模式已经不能适应行业快速发展的需要。现有的信息化系统及设备各自为政、相互割裂，对于运维人员的专业技能提出了更高的要求。依靠传统管理方式不仅效率低下，而且容易出错，也造成人工成本的增加，亟需利用智能化技术及手段实现对基础设施设备的智慧化运维管理。

今天我们主要讲述的事three.js(webgl)、3D技术再物业基础设施运维中的展示与应用。

项目目标：基于物联网3D技术，结合开放的IOT中台开放能力，助力物业管理数字化转型，实现基础设施设备的智慧化、可视化运维管理。

如果你有什么要交流的心得 可邮件我

一、项目效果与功能说明：

闲话少叙，我们先看一下最终的实现效果：

1.1 、园区的整体

采用科技蓝底色，数据大屏风格，中间绘以3D大楼效果。道路上用流光效果代替灯光与车流，写实风格与科技感结合。

1.2、设备房列表

鼠标滑动到设备房时能够展示设备房的名称信息。

1.3、双击设备房，显示设备房内详情

双击设备房，显示设备房内详细信息以及重要设备的实时重要量监控信息。

1.3.1、消防泵房效果

1.3.2、生活泵房效果

1.3.3、配电房效果

1.3.4、双层设备房效果

1.4、楼宇设备 楼宇电表

1.5、电梯监控展示

1.6、设备状态监测

当有告警产生时，对应的设备，设备房将会有红色闪动

二、具体实现方式

2.1、首先我们准备场景中需要的模型，本人还是推崇简单模型使用代码建模方式，复杂模型考虑到工作效率，采用第三方载入方式。

2.1.1、准备周边环境模型，这里我们主要还是用代码的方式实现周边环境。

a、最难的流光效果

我们通过改变管道贴图的uv贴图值来实现流光效果，适当改变透明度以及贴图的样式。

[{"show":true,"uuid":"","name":"flowtube_6","objType":"flowTube","points":[{"x":0,"y":300,"z":0},{"x":100,"y":250,"z":100},{"x":100,"y":400,"z":400}],"position":{"x":0,"y":0,"z":0},"scale":{"x":1,"y":1,"z":1},"rotation":[{"direction":"x","degree":0}],"style":{"skinColor":16772846,"imgurl":"../../img/3dImg/right1.png","canvasSkin":{"cwidth":1024,"cheight":128,"cwNub":16,"chNub":2,"cMarginW":0.2,"cMarginH":0.2,"run":true,"speed":8,"fps":40,"direction":"w","forward":"f","bgcolor":"rgba(255, 0, 162, 0.68)","side":2}},"segments":64,"radialSegments":8,"closed":false,"radius":10,"showSortNub":6}]

b、平时项目过程中积累的虚拟楼宇

[{"show":true,"uuid":"","name":"hb_2_11","objType":"Lathe","position":{"x":7418.924,"y":0,"z":1036.092},"points":[{"x":1000,"y":0,"z":0},{"x":1000,"y":2000,"z":0}],"style":{"skinColor":1433087,"imgurl":"../img/3dimg/kehuandimian.png","repeatx":true,"width":1,"repeaty":true,"height":20,"side":2,"opacity":0.3},"segments":1,"radialSegments":4,"closed":true,"phiStart":0.7853981633974483,"phiLength":6.283185307179586,"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1.5,"y":2,"z":1.5},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}]

c、路灯效果

c、接下来就是通过各种代码模型的组合，与贴图，产生环境模拟

2.1.2、单体大楼效果

2.1.3、我们同样用代码，写出大楼的样子

模型代码：

2.1.3、我们再看看楼层的代码模型

楼层模型比较简单：

使用代码写出一个个楼层平面，然后clone出来，修改位置即可。

2.2、设备房实现

2.2.1、与其它方式一样，还是先写出设备房模型，这一点由于前期项目积累，以及积累了很多设备模型的代码，我们后面项目直接组装复用即可

例如下列设备

水浸：

温湿度：

2.2.2、设备房结构我们采用半透明，加上虚拟墙体效果，这样便于操作展示设备信息，看起来也充满科技感，如下：

设备房代码：

三、具体实现

3.1、起始页部分重要代码如下

设备总览

智能门禁系统

楼层设备总览

3号梯 在线

门禁开关：

开

查看进出记录

视频系统

楼层设备总览

信息发布系统

楼层设备总览

3号梯 在线

设备开关：

开

设置音量	设备重启

查看发布内容

智能电梯系统

电梯内实时监控

1号梯 在线

8 F

查看电梯监控

查看使用记录

2号梯 在线

8 F

查看电梯监控

查看使用记录

智慧消防系统

楼层设备总览

3号梯 在线

查看报警记录

位置：检验科门口

环境监测系统

楼层设备总览

\

温度：

26.5℃

位置： 啊是犯法的事

查看报警记录

智能广播系统

楼层设备总览

数据中心

关闭

变配电系统

给排水系统

送排风系统

设备报警列表

门禁记录查询

查询条件：

至

查 询

退出

设备量

报警记录查询

查询条件：

至

升序 降序

查 询

退出

3.2、业务逻辑部分重要代码与讲解如下

3.3、交互逻辑代码

由于篇幅原因，这一课先介绍到这里

后面我将继续讲解用webgl 建立 3D隧道、3D桥梁、webgl实现三维隧道桥梁、three.js实现三维隧道桥梁、桥梁隧道三维应用炫酷效果等等

如果你有什么要交流的心得 可邮件我

其它相关文章：