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

2022-04-26 03:39:58

写在前面的废话：

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

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

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

序：

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

首先我们描述一下概念：

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

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

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

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

技术交流 1203193731@qq.com

交流微信：

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

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

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

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

1.1 、园区的整体

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

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

1.2、设备房列表

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

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

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

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

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

1.3.1、消防泵房效果

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

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>

<head>

</head>

if (!Detector.webgl) {

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

}

</script>

</audio>

</div>

<div>

</div>

</div>

</div>

</div>

<div>

</div>

</div>

<div class="title" v-text="title">智能门禁系统</div>

</div>

</div>

楼层设备总览

</div>

</div>

</div>

查看进出记录

</div>

<div>

</div>

</div>

</div>

</div>

楼层设备总览

</div>

</div>

信息发布系统

</div>

</div>

楼层设备总览

</div>

</div>

</div>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</div>

查看发布内容

</div>

智能电梯系统

</div>

</div>

电梯内实时监控

</div>

<!--<table style="width:360px;margin-left:40px;">

<tr>

<td>

<font id="lift_video1_title" class="indexVideoTitle">电梯实时监控1</font>

</div>

</td>

</tr>

<tr>

<td>

<font id="lift_video2_title" class="indexVideoTitle">电梯实时监控2</font>

</div>

</td>

</tr>

</table>-->

</div>

查看电梯监控

</div>

查看使用记录

</div>

</div>

查看电梯监控

</div>

查看使用记录

</div>

智慧消防系统

</div>

</div>

楼层设备总览

</div>

</div>

查看报警记录

</div>

<font style="float:left;">位置：检验科门口</font>

</div>

环境监测系统

</div>

</div>

楼层设备总览

</div>

<font class="fireLi_DivTopName" title=""></font>\

</div>

温度：

</div>

26.5℃

</div>

<font style="float:left;">啊是犯法的事</font>

</div>

查看报警记录

</div>

智能广播系统

</div>

</div>

楼层设备总览

</div>

</div>

<div id="xzldbBtn" class="btn_li">写字楼电表</div>

<div id="xfmdylBtn" class="btn_li">消防末端压力</div>

</div>

<div>

</div>

</div>

</div>

关闭

</div>

</div>

<div>

</div>

</div>

<div class="title" v-text="title">变配电系统</div>

</div>

</div>

<div>

</div>

</div>

<div class="title" v-text="title">给排水系统</div>

</div>

</div>

<div>

</div>

</div>

<div class="title" v-text="title">送排风系统</div>

</div>

</div>

<div>

</div>

</div>

<div class="title" v-text="title">设备报警列表</div>

</div>

</div>

<div>

</div>

</div>

<div class="title" v-text="title">门禁记录查询</div>

</div>

<tr>

<!--<select style="float:left;width:80px;height:28px; font-size:14px; text-align:center;line-height:28px;color:white;background-color:rgba(0,0,0,0) !important;color:#32C5FF !important;border:1px solid #32C5FF;">

</select>-->

</td>

查 询

</div>

</td>

退出

</div>

</td>

</tr>

</table>

</div>

</div>

<div>

</div>

</div>

</div>

</div>

<div>

</div>

</div>

<div class="title" v-text="title">报警记录查询</div>

</div>

<tr>

</select>

</td>

查 询

</div>

</td>

退出

</div>

</td>

</tr>

</table>

</div>

</div>

</body>

$(document).ready(function () {

if (window.parent.loadingClose3DFun) {

window.parent.loadingClose3DFun();

}

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

modelBussiness.init();

},3000);

});

</script>

</html>

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

View Code

3.3、交互逻辑代码

View Code

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

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

技术交流 1203193731@qq.com

交流微信：

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

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

码农公寓

相关文章