做哪一类的网站可以短时间变现,单位网页制作,网站有哪些区别是什么,养殖业网站模板前言智慧楼宇和人们的生活息息相关#xff0c;楼宇智能化程度的提高#xff0c;会极大程度的改善人们的生活品质#xff0c;在当前 工业互联网 大背景下受到很大关注。目前 智慧楼宇可视化监控 的主要优点包括:智慧化 -- 智慧楼宇是一个生态系统#xff0c;像人一样拥有感知…前言智慧楼宇和人们的生活息息相关楼宇智能化程度的提高会极大程度的改善人们的生活品质在当前 工业互联网 大背景下受到很大关注。目前 智慧楼宇可视化监控 的主要优点包括:智慧化 -- 智慧楼宇是一个生态系统像人一样拥有感知能力、自我判断能力以及控制能力。绿色化 -- 绿色建筑在耗能、产能以及能源管理方面实现绿色化楼宇安防实现绿色化监控。运行成本可控制 -- 基于可持续发展的要求现代建筑、商业建筑需运行50年以上建筑在运行过程中能源消耗巨大如何降低运营成本降低使建筑在低碳、环保的状态下健康运行。衣食住行往往是不可或缺而楼宇建设一直是社会发展进步的一块基点。以往的管理方式需要细致地划分各个模块的实施但各个模块又相对独立在管理成本上和人力投入上都耗费了许多的精力。现如今在科技日益发展的道路上我们历经了 工业互联网 的浪潮又顺应了 5G 新时代、新基建 的发展工业4.0 不单势在必行而是已经步步落实。通过技术发展的经验总结我们可以在互联网实施多样化行业可视化系统监控管理方案智慧楼宇可视化系统亦是如此通过一套完备的子系统串联整理出可视化在线管理系统的集合极大提升了管理能力和节省劳动力的投入。传统的 智慧楼宇/楼宇自动化/楼宇安防/智慧园区 常会采用 BIM建筑信息模型 Building information modeling软件如 Autodesk 的 Revit 或 Bentley 这类建筑和工程软件但这些 BIM 建模模型的数据往往过于庞大臃肿绝大部分细节信息对楼宇自控意义不大反而影响拖累了行业 Web SCADA 或 Web 组态监控的趋势所以我们采用以 Hightopo 的 HT for Web 产品轻量化 HTML5/WebGL 建模的方案实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。本篇文章通过对智能建筑的建模页面动画效果的实现以及页面主要功能点进行阐述帮助我们了解如何使用 HT 实现一个简单的智慧楼宇可视化监控以及帮助我们了解智慧楼宇楼宇自动化的优势。预览地址基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控 http://www.hightopo.com/demo/ht-smart-building/界面简介及效果预览界面通过 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 线段长度之后再进行下一条路径动画的绘制以下为关键伪代码展示// currentIndex 为当前路径绘制到的点的索引
通过上述代码可以知道我们获取到了 currentPoints 以及 currentSegments 的信息了之后便要计算在 fromPoint(A点) 与 toPoint(B点) 连线上点的坐标即 C 点以下为计算 C 点的关键伪代码// addLength 为每次增加的线段长度值该程序中使用 500 即每次长度增加 500
以下为动画代码执行流程图以下为绘制一条路线动画的截图程序中通过向量的计算方式来不断获取 C 点的坐标当然也可以用其它方式来计算 C 点的坐标。2. 水波以及扫描动画代码分析水波以及扫描动画都是通过 HT 提供的修改图标矩形框信息 api 来进行控制通过调度的方式不断修改图标矩形框大小来产生水波以及扫描的动画效果调度的具体用法可以参考 HT for Web 的[调度手册]以下为水波动画的关键伪代码// waterWaveNodes 所有水波节点下图为水波在 2d 中的截图3. 数字变化动画代码分析从程序的截图中可以看到在 2d 面板以及 3d 场景中都有数字在动态的变化这部分主要通过数据绑定动态来修改数值的大小关于数据绑定可以参考 HT for Web 的[数据绑定手册]也是通过调度来不断修改数值的大小程序中我封装了产生随机数的代码用于每次产生随机数之后绑定到对应的节点上以下为修改 2d 面板上数字的变化伪代码// numNode(1-7) 为 2d 面板中对应数字的节点
通过以上代码可以知道修改数值是通过修改节点的 attr 以及 style 对象的某个属性值来动态变化数值当然在程序中 2d 面板可能还会隐藏此时该调度任务就不需要执行可以调用 removeScheduleTask 方法来移除此调度任务。4. 柱状图高度动画代码分析在 3d 场景中柱状体也是一个六面体只是四周用了渐变的贴图以及顶面用了一张纯色的贴图构造出来每个六面体都有高度的信息HT 中通过 node.getTall() 来获取当前六面体的高度值根据上一节讲的数据绑定我们可以在展示柱状图的时候循环获取所有柱状体节点的高度值大小假如命名为 tall之后通过 node.a(tall, tall) 将该值存储到当前柱状图节点的 attr 对象上面之后在柱状体初始化的时候可以不断修改高度值来动态改变高度当高度值大于 node.a(tall) 则说明当前柱状体初始化的高度已经完成。以下为相关的伪代码charts通过上面代码可以知道动画每一步的程序执行也是通过调度来完成的与前文几个动画的实现方式类似。5. 3d 镜头推进代码分析3d 场景中视野的推进后退都是通过 HT api 提供的修改 eye 以及 center 的数值方法来实现通过不断调用 setEye 以及 setCenter 方法来达到修改视角的目的eye 类比人眼睛所处的位置center 类比人眼睛聚焦的位置以下为实现镜头推进关键的伪代码let 通过以上代码可以知道通过修改 eye 与 center 分别对应的 xyz 轴的值与当前 e 与 c 分别对应的 xyz 轴的值之间的距离来达到视角的变化。以下为该代码的一个应用截图:总结物联网 通过各种信息传感设备实时采集任何需要监控、连接、互动的物体或过程等各种需要的信息与互联网结合形成的一个巨大网络。实现了物与物、物与人所有的物品与网络的连接方便识别、管理和控制。所以物联网带给我们的 智慧楼宇的可视化监控 需要监控的方面可能还有很多该系统中针对人员出入设备信息管道信息等的监控实现了一个简单的智慧楼宇监控系统物联网也将用户端延伸和扩展到了任何物品与物品之间让我们更加了解搭建智慧园区智慧校园等场景监控之后设备可视化资产可视化带给我们的直观性。场景中的反光与景深等效果都是 HT 核心包提供的效果所有的模型搭建与动画也都是通过 HT 核心包提供的 api 进行建模与动画驱动所以在网页中展示会十分流畅大大提高了用户的体验并且在移动端表现也十分友好。以下为移动端的程序运行截图HT 通过在行业上不断地摸索和技术上的钻研提升总结出了许多工业互联网上各个行业的解决方案不仅可以在 PC 端展示出可视化监控系统在移动端同样可以轻量型地展示出来。以下是另外一个智慧楼宇的可视化监控系统的实现效果同样的2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集在这里你能发现许多新奇的实例也能发掘出不一样的工业互联网https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA同时你也可以查看更多案例及效果https://www.hightopo.com/demos/index.html
