基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用

 

前言

在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接,结合软件和大数据分析的工业互联网也将变得越来越容易实现!

国家也敏锐意识到时代特性并及时把握时机,培育新的经济增长点,推动“中国制造”升级,实现工业大国到工业强国的质变,而诸多的业内人士也正在努力完成对自己的“升级”与“改造”,而大数据的数据可视化与工业的结合,实现了工控的可视化,大大地提高工控管理效率,风险把控能力,产业流程有效监督等等。

如今得益于基于 HTML5 WebGL 的出现,从技术上实现工控数字化管理模式变得简单易行,核心提高对工控设备信息的可视化与管理效率,可以实时掌握设备每个参数的状态,对资源的实时管理,对整体运行稳定性风险度有极高的可控性。

如下所示,便是一个基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用中的风机项目:

此项目链接:

从上面设计图中可以看到页面布局主要四部分组成:table 表格,表盘,echarts 图表,3d 风机模型。

在这个页面中非常具体而又全面的展示了风机设备的相关设备信息,比如风机设备名称,风机参数,发电量数据,机舱温度以及功率风速折线图表等等,这对于管理员而言是一种享受!

在 3d 风机模型出可以对风机进行拉近拉远等交互,实现风机外壳透明化、隐藏、显示效果,如图所示:

在拉近风机隐藏风机外壳显示内部部件时候可以点击部件获取点击部件详细信息:

在如上整个风机项目中技术核心同时也是难点的是对 3d 风机模型的交互操作实现上,在此我把 3d 风机模型单独拿出来做讲解,其完整风机交互效果如下动图所示:

在如上的项目中使用的风机模型是通过 MAYA 和 MODO 建模制作而成,这两个工具导出的 obj 和 mtl 文件,在 HT 编辑器中可以通过解析这两个文件来生成 3d 场景中的风机部件模型,然后通过 HT 的 3d 编辑器场景搭建完成整体风机场景。

在开始操作之前先确认需求,从上面效果图中分析可以看到主要有三个功能需求:

1、滚轮滚动时风机外壳透明化到隐藏再到显示效果;

2、点击风机内部部件时有对应的弹窗出现以及点击弹窗隐藏;

3、风机叶片旋转效果;

在明确所需要的交互功能需求后,我们就可以一步一步来实现它。

技能储备

本 demo 需要掌握 

ht.Default.handleModelLoaded = function (data) {     //模型加载完成时回调}
复制代码

通过 handleModelLoaded 解决模型加载异步问题后,就可以在函数内针对模型进行事件绑定操作。

首先声明一个数组,是三个模型的 tag 名,通过后面的 for 循环获取这三个模型:

复制代码
//风机三个外壳var fanArr = ['风机_叶片', '风机_机箱外壳2', '风机_轮毂外壳'];
复制代码

然后在 handleModelLoaded 方法的函数内对风机外壳模型进行操作:

复制代码
for (var i = 0; i < fanArr.length; i++) { //滚轮控制拉远拉近时风机部件透明化    if (data == 'models/机械设备/风力发电机/' + fanArr[i] + '.json') {         var model = ht.Default.getShape3dModel('models/机械设备/风力发电机/' + fanArr[i] + '.json');         //通过tag标签名获取模型        var tags = g3d.dm().getDataByTag(fanArr[i]);         //绑定滚轮事件        g3d.getView().addEventListener('mousewheel', function (e) {             //获取eye到center距离            //通过distance判断显示隐藏的滚轮距离            var distance = ht.Default.getDistance(g3d.getEye(), [0, 9500, 0]);             if (distance < 2700 && distance > 2100) {                 //拉近机箱外壳透明化                tags.setStyle('shape3d.transparent', true);                 tags.setStyle('shape3d.opacity', 0.5);                 tags.setStyle('shape3d.visible', true);                 //拉远隐藏显示框                for (var j2 = 0; j2 < eightArr.length; j2++) {                     var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show');                     textViews.setStyle('3d.visible', false);                 }             }             else if (distance > 2700) {                 //拉远恢复原状                tags.setStyle('shape3d.transparent', false);                 tags.setStyle('shape3d.opacity', 1);             }             else if (distance < 2100) {                 //拉近隐藏机箱外壳                tags.setStyle('shape3d.visible', false);             }         })     } }
复制代码
<
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信