基于 HTML5 的 WebGL 智能楼宇智慧建筑 3D 可视化监控管理平台

  • 时间:
  • 浏览:1
  • 来源:彩神大发11选5_神彩大发11选5官方

场景关键动画代码分析

// 判断 AC 线段的长度与非 大于 AB

if(nextVectorLength > pointVectorLength) {

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

});

通过以上代码不会 知道通过修改 eye 与 center 分别对应的 xyz 轴的值与当前 e 与 c 分别对应的 xyz 轴的值之间的距离来达到视角的变化。

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

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

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

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

以下为绘制一条路线动画的截图:

// addLength 为每次增加的线段长度值,该程序运行中使用 50 即每次长度增加 50

let nextVectorLength = currentVectorLength + addLength,

pointVector.setLength(nextVectorLength);

// eye 为必须修改的对应 eye 值

// center 为必须修改的对应 center 值

// 以下为分别获取 eye 与 center 在 xyz 另一个坐标轴之间的差值

// 即为 C 点坐标

tempPoint = {x: pointVector.x + fromPoint.x, y: pointVector.y + fromPoint.y};

// 往 currentPoints 添加 C 点坐标

currentPoints.push(tempPoint);

// 往 currentSegments 添加 C 点连接方法,此程序运行中都为直线连接,统统 值都为 2

currentSegments.push(2);

// roadNode 即为 ht.Shape 类 重新设置 ht.Shape 类点的信息

roadNode.setPoints(currentPoints);

// 重新设置 ht.Shape 类点的连接信息

roadNode.setSegments(currentSegments);

以下为动画代码执行流程图:

let currentPoints = [], currentSegments = [];

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

}

dm2d.addScheduleTask(this.change2dNumTask); // 新增该调度任务

通过以上代码不会 知道修改数值是通过修改节点的 attr 以及 style 对象的某个属性值来动态变化数值,当然在程序运行中 2d 面板因此 一定会隐藏,此时该调度任务就我太少 须执行,不会 调用 removeScheduleTask 方法来移除此调度任务。

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

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

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

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

智能建筑建模

该 3d 场景中所有的模型均为线段和六面体搭建,相比较通过 3d Max 建模因此 通过 obj 导入来说场景中的三角面会少统统 ,更加的轻量化,类事 场景中建筑的楼层,通过 ht.Shape 类绘制,该类中记录着楼层 points 点的信息以及 segments 为 ht.List 类型的线段数组信息,segments 代表着点的连接方法,用于告诉 ht.Shape 利用点的信息来绘制二次贝塞尔曲线因此 三次贝塞尔曲线因此 直线等信息,相关具体说明请参考(结构手册 - HT for Web),以下为绘制单层的截图:

监控界面包括:

}

通过上述代码不会 知道大伙获取到了 currentPoints 以及 currentSegments 的信息了,之前 便要计算在 fromPoint(A点) 与 toPoint(B点) 连线上点的坐标,即 C 点,以下为计算 C 点的关键伪代码:

界面简介及效果预览

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

以下为该代码的另一个应用截图:

// currentIndex 为当前路径绘制到的点的索引

// points 为当前路径所有点的信息 currentPoints 为绘制过程中点的信息

// segments 为当前路径所有点的连接方法信息 currentSegments 为绘制过程中点的连接方法信息

// 即上述此时 A 点信息

let fromPoint = points[currentIndex];

// 即上述此时 B 点信息

let toPoint = points[currentIndex + 1];

// 通过 AB 两点信息组成一条 AB 方向的向量

let pointVector = new ht.Math.Vector2(toPoint.x - fromPoint.x, toPoint.y - fromPoint.y);

// 记录该向量的长度,用于判断 AC 与非 大于等于 AB

let pointVectorLength = pointVector.length();

for(let i = 0; i < currentIndex + 1; i++) {

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

// waterWaveNodes 所有水波节点

let waterWaveTask = {

监控界面效果

});

this.chartAnimteTask = {

总结

物联网通过各种信息传感设备,实时收集任何必须监控、连接、互动的物体或过程等各种必须的信息,与互联网结合形成的另一个巨大网络。实现了物与物、物与人,所有的物品与网络的连接,方便识别、管理和控制。统统 物联网带给大伙的知慧楼宇的可视化监控必须监控的方面因此 还有统统 ,该系统中针对人员出入,设备信息,管道信息等的监控实现了另一个简单的知慧楼宇监控系统,物联网也将用户端延伸和扩展到了任何物品与物品之间,让大伙更加了解搭建知慧园区,知慧校园等场景监控之前 设备可视化,资产可视化带给大伙的直观性。场景中的反光与景深等效果一定会 HT 核心包提供的效果,所有的模型搭建与动画也一定会通过 HT 核心包提供的 api 进行建模与动画驱动,统统 在网页中展示会十分流畅,大大提高了用户的体验,因此 在移动端表现也十分友好。

roadData.currentVectorLength = nextVectorLength;

charts.forEach((chart) => {

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

};

dm3d.addScheduleTask(this.chartAnimteTask); // 新增该调度任务

通过里面代码不会 知道动画每一步的程序运行执行也是通过调度来完成的,与前文十好多个 动画的实现方法类事 。

};

dm3d.addScheduleTask(waterWaveTask); // 新增该调度任务

下图为水波在 2d 中的截图:

界面初始化效果

程序运行中通过向量的计算方法来不断获取 C 点的坐标,当然可是我会 用其它方法来计算 C 点的坐标。

let e = ht.Default.clone(g3d.getEye()), // 获取当前眼睛的位置

// numNode(1-7) 为 2d 面板中对应数字的节点

// data.a('ht.value', number) 即为动态修改 attr 上的 ht.value 信息,之前 图纸会自动更新新赋予的数值

// getRandomValue 为当事人封装的产生随机数的方法

this.change2dNumTask = {