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

写在前面的废话：

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

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

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

序：

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

首先我们描述一下概念：

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

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

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

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

技术交流 [email protected]

交流微信：

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

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

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

1.1 、园区的整体

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

 1.2、设备房列表

 点击设备房案例，无缝切换到楼层模式，通过科技蓝楼层方式，简洁明了的展示每个楼层的效果。并且把设备房位置通过精灵模型放置到对应的位置上。

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

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

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

1.3.1、消防泵房效果

1.3.2、生活泵房效果

1.3.3、配电房效果

 1.3.4、双层设备房效果

 1.4、楼宇设备 楼宇电表

点击电表按钮，显示楼宇电表排布信息，与设备概览

 1.5、电梯监控展示

 二、具体实现方式

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、路灯效果

View Code

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

 2.1.2、单体大楼效果

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

模型代码：

View Code

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

楼层模型比较简单：

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

 2.2、设备房实现

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

例如下列设备

水浸：

、

温湿度：

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

 设备房代码：

View Code

 三、具体实现

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

DOCTYPE html>

    if (!Detector.webgl) {

      layer.alert("您的浏览器不支持3D功能,请使用支持WebGL的浏览器（例如：chrome浏览器、ie11以上浏览器等）");

    }

                    设备总览

                    智能门禁系统

                        楼层设备总览

                            3号梯

                            在线

                                门禁开关：

                                开

                                查看进出记录

                    视频系统

                        楼层设备总览

                        信息发布系统

                        楼层设备总览

                            3号梯

                            在线

                                设备开关：

                                开

                                    设置音量设备重启

                                查看发布内容

                        智能电梯系统

                        电梯内实时监控

                            1号梯

                            在线

                            8;F

                                查看电梯监控

                                查看使用记录

                            2号梯

                            在线

                            8;F

                                查看电梯监控

                                查看使用记录

                        智慧消防系统

                        楼层设备总览

                            3号梯

                            在线

                                查看报警记录

                                位置：检验科门口

                        环境监测系统

                        楼层设备总览

                            \

                                    温度：

                                    26.5℃

                                位置：

                                啊是犯法的事

                                查看报警记录

                        智能广播系统

                        楼层设备总览

        主楼

        设备房

        写字楼电表

        消防末端压力

                数据中心

                关闭

                变配电系统

                给排水系统

                送排风系统

                设备报警列表

                门禁记录查询

                            查询条件：

                            至

                                    查;询

                                    退出

                设备量

                报警记录查询

                            查询条件：

                            至

                                    升序

                                    降序

                                    查;询

                                    退出

    $(document).ready(function () {

        if (window.parent.loadingClose3DFun) {

            window.parent.loadingClose3DFun();

        }

            showLoading(100, config.BuildCameraPosition, config.BuildCameraTarget, null, function () {

            modelBussiness.init();

            },3000);

        });

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

View Code

3.3、交互逻辑代码

View Code

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

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

技术交流 [email protected]

交流微信：

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