智慧楼宇和人们的生活息息相关，楼宇智能化程度的提高，会极大程度的改善人们的生活品质，在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括:

智慧化 -- 智慧楼宇是一个生态系统，像人一样拥有感知能力、自我判断能力以及控制能力。

绿色化 -- 绿色建筑在耗能、产能以及能源管理方面实现绿色化，楼宇安防实现绿色化监控。

运行成本可控制 -- 基于可持续发展的要求，现代建筑、商业建筑需运行50年以上，建筑在运行过程中能源消耗巨大，如何降低运营成本降低，使建筑在低碳、环保的状态下健康运行。

传统的 智慧楼宇/楼宇自动化/楼宇安防/智慧园区 常会采用 BIM（建筑信息模型 Building information modeling）软件，如 Autodesk 的 Revit 或 Bentley 这类建筑和工程软件，但这些 BIM 建模模型的数据往往过于庞大臃肿，绝大部分细节信息对楼宇自控意义不大，反而影响拖累了行业 Web SCADA 或 Web 组态监控的趋势，所以我们采用以 Hightopo 的 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。

本篇文章通过对智能建筑的建模，页面动画效果的实现，以及页面主要功能点进行阐述，帮助我们了解如何使用 HT 实现一个简单的智慧楼宇可视化监控，以及帮助我们了解智慧楼宇，楼宇自动化的优势。

预览地址：基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控 

界面简介及效果预览

界面通过 2d 图纸叠加在 3d 场景上来实现 2d 界面 与 3d 场景的融合，2d 界面通过自动布局的机制实现了手机端与电脑端的响应式呈现。

界面初始化效果

界面初始化过程中的动画包括地面路径的实时渲染，楼层的展开，楼层的辉光扫描，楼层报警点动态水波，楼层监测数据面板的实时变化等等。

监控界面效果

监控界面包括：

人员进入大厦的实时监控，面板中动态刷新人员进入大厦的头像以及当前大厦人数等实时信息。

大厦电梯运行情况实时监控，系统中展示电梯当前的运行位置以及是否在运行等信息。

大厦某个具体楼层监控数据的实时监控，通过柱状图的形式展示了当前楼层具体信息的大小。

大厦管道的实时监控，展示了当前智能建筑所有管道的运行情况。

智能建筑建模

该 3d 场景中所有的模型均为线段和六面体搭建，相比较通过 3d Max 建模然后通过 obj 导入来说场景中的三角面会少很多，更加的轻量化，例如场景中建筑的楼层，通过 ht.Shape 类绘制，该类中记录着楼层 points 点的信息以及 segments 为 ht.List 类型的线段数组信息，segments 代表着点的连接方式，用于告诉 ht.Shape 利用点的信息来绘制二次贝塞尔曲线或者三次贝塞尔曲线或者直线等信息，相关具体说明请参考 HT for Web 的[形状手册]，以下为绘制单层的截图：

通过上图可以知道构建完一层模型之后其它几层模型均为相同的，只是 y 轴的数值不同，通过叠加几层之后便可形成一幢大楼的轮廓。如果用户需要搭建智慧园区，智慧楼宇等场景，完全可以使用这种基于 HTML5/WebGL 建模的方案，减少考虑使用 BIM 建模模型。场景中的管道以及背景地图路线都为点连线之后构成，只是通过修改线的颜色粗细或者进行贴图来修改线或者面的样式，场景中的电梯为一个颜色为黄色的简单六面体，电梯线也为一条线段而已，所以场景中的模型都是轻量化的建模，使 3d 场景运行渲染的更加流畅，提升用户体验。

场景关键动画代码分析

1. 地图路线动画代码分析

通过上述智能建筑建模的分析我们可以知道线路都是为点与点之间进行连线而生成，所以当我们绘制完地图的路径之后可以得到所有点的信息，假如直线 AB 为地图中的某一条线段，那么我们可以知道点 A 以及点 B 的点的坐标，之后我们可以计算 AB 线段上任意一点 C 的点的坐标，然后通过连接 A 点与 C 点来形成一条与 AB 线段位置方向相同但是大小比 AB 线段短的线，直到 AC 线段的长度等于 AB 线段长度之后再进行下一条路径动画的绘制，以下为关键伪代码展示：