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

2024-08-30 11:08

本文主要是介绍基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

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

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

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

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

此项目链接:基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用(http://www.hightopo.com/demo/FanDevice/)

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

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

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

 

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

 

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

 

在如上的项目中使用的风机模型是通过 MAYA 和 MODO 建模制作而成,这两个工具导出的 obj 和 mtl 文件。

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

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

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

3、风机叶片旋转效果;

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

实现功能

1,滚轮滚动时风机外壳透明化到隐藏效果

由于该风机场景是由多个子模型拼装形成,所以在加载场景时候存在子模型加载的异步问题,存在的异步问题会导致在获取子模型并对其绑定事件时候发生错误,比如提示该子模型 undefined,所以要先解决这个问题。

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);}})}
}

如此就实现了第一个目标,成功实现滚轮滚动时风机外壳透明化到隐藏效果。

然后接着第二个目标。

2,点击风机内部部件时有对应的弹窗出现

实现该效果无非就是两步走,获取部件模型,然后给模型绑定点击事件(点击显示弹窗,点击弹窗隐藏弹窗)

首先声明一个部件数组:

//风机内部九大部件
var parts = ['风机_控制柜', '风机_发电机', '风机_风冷装置', '风机_制动联结装置', '风机_油冷装置', '风机_齿轮箱', '风机_主轴', '风机_转子齿轮', '风机_变桨系统'];

然后代码实现,也是放在 handleModelLoaded 方法的函数内:

//九大部件与弹窗绑定点击事件
g3d.mi(function (e) { //交互事件监听器//绑定点击事件if (e.kind === 'clickData') {for (var j = 0; j < parts.length; j++) {if (e.data.getTag() === parts[j]) {for (var j2 = 0; j2 < parts.length; j2++) {//通过tag标签名获取模型图元var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show');textViews.setStyle('3d.visible', false);}//通过tag标签名获取弹窗图元var textView = g3d.dm().getDataByTag(eightArr[j] + 'show');textView.setStyle('3d.visible', true);}//弹窗点击事件if (e.data.getTag() === parts[j] + 'show') {var textView2 = g3d.dm().getDataByTag(parts[j] + 'show');textView2.setStyle('3d.visible', false);}}}
})

在实现部件点击显示弹窗和点击弹窗隐藏效果后,就差最后一步,完成风机叶片旋转效果。

3,风机叶片旋转效果

风机叶片旋转原理非常简单,本质就是控制 rotation 的参数,通过 startAnim 方法递增参数值实现叶片旋转动态效果。

还是老路子,先获取风机叶片模型,然后再修改和赋予 rotation 参数值,代码实现也是放在 handleModelLoaded 方法的函数内。

//风机叶片旋转
if (data == 'models/机械设备/风力发电机/风机_轮毂外壳.json') {var rotation = '';var deg = Math.PI / 180;var speed = 2;function animation() {//获取风机模型var modelWheel = g3d.dm().getDataByTag('风机_轮毂外壳');ht.Default.startAnim({duration: 5500, // 动画周期毫秒数,默认采用action: function (v, t) {rotation = [0, 0, deg * (speed--)];modelWheel.setRotation3d(rotation);},finishFunc: function () { //动画结束后调用animation();}})}animation();
}

4,完整代码

完成三个功能需求后完整核心代码如下所示:

//风机三个外壳
var fanArr = ['风机_叶片', '风机_机箱外壳2', '风机_轮毂外壳'];
//风机内部九大部件
var parts = ['风机_控制柜', '风机_发电机', '风机_风冷装置', '风机_制动联结装置', '风机_油冷装置', '风机_齿轮箱', '风机_主轴', '风机_转子齿轮', '风机_变桨系统'];
ht.Default.handleModelLoaded = function (data) {//模型加载完成的回调for (var i = 0; i < fanArr.length; i++) { //滚轮控制拉远拉近时风机部件透明化if (data == 'models/机械设备/风力发电机/' + fanArr[i] + '.json') {var model = ht.Default.getShape3dModel('models/机械设备/风力发电机/' + fanArr[i] + '.json');// console.log(model);var tags = g3d.dm().getDataByTag(fanArr[i]);g3d.getView().addEventListener('mousewheel', function (e) {//获取eye到center距离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);}})}}//九大部件与弹窗绑定点击事件g3d.mi(function (e) { //交互事件监听器if (e.kind === 'clickData') {for (var j = 0; j < parts.length; j++) {if (e.data.getTag() === parts[j]) {for (var j2 = 0; j2 < parts.length; j2++) {var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show');textViews.setStyle('3d.visible', false);}var textView = g3d.dm().getDataByTag(eightArr[j] + 'show');textView.setStyle('3d.visible', true);}//弹窗点击事件if (e.data.getTag() === eightArr[j] + 'show') {var textView2 = g3d.dm().getDataByTag(eightArr[j] + 'show');textView2.setStyle('3d.visible', false);}}}})//风机叶片旋转if (data == 'models/机械设备/风力发电机/风机_轮毂外壳.json') {var rotation = '';var deg = Math.PI / 180;var speed = 2;function animation() {//获取风机模型var modelWheel = g3d.dm().getDataByTag('风机_轮毂外壳');ht.Default.startAnim({duration: 5500, // 动画周期毫秒数,默认采用action: function (v, t) {rotation = [0, 0, deg * (speed--)];modelWheel.setRotation3d(rotation);},finishFunc: function () { //动画结束后调用animation();}})}animation();}
}

结束语

这个风机 demo 功能的实现整体原理很简单,万变不离其宗,最终都是获取对象然后绑定事件实现效果。再复杂的功能通过解析后发现最终也不过是一个又一个简单小功能组合到一起最后实现大的功能。

所以在学习过程中基础最重要,再大的项目解析到最小也还是要通过基础代码一步一步实现。

这篇关于基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120647

相关文章

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使

Python循环缓冲区的应用详解

《Python循环缓冲区的应用详解》循环缓冲区是一个线性缓冲区,逻辑上被视为一个循环的结构,本文主要为大家介绍了Python中循环缓冲区的相关应用,有兴趣的小伙伴可以了解一下... 目录什么是循环缓冲区循环缓冲区的结构python中的循环缓冲区实现运行循环缓冲区循环缓冲区的优势应用案例Python中的实现库

SpringBoot整合MybatisPlus的基本应用指南

《SpringBoot整合MybatisPlus的基本应用指南》MyBatis-Plus,简称MP,是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,下面小编就来和大家介绍一下... 目录一、MyBATisPlus简介二、SpringBoot整合MybatisPlus1、创建数据库和

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处