PLC浏览器端机械动画仿真（nodejs、vue）

这么多年了第一次发原创，平时都是在这里学习大家分享的资料，希望以后也能把积累的知识做个总结；

传统制造行业的设备界面普遍都比较简单，对于机械设备监控、机械仿真这一块领域做的不是很好，大多都依赖西门子、欧盟龙等厂家提供的软件设备，每一套设备价格高昂，就算是制造业的大公司在这上面的开销也会头疼不已，以此为前提，提供如下解决方案：

1. PLC服务端通过OPC-UA协议发送数据；（plc程序员很清楚如何提供）；

2. 创建nodejs服务端通过安装node-opcua模块，创建opc客户端接收PLC发送数据；

3. 接收到数据的同时创建websocket服务端，通过websocket广播发送数据；

4. web前端创建websocket客户端，接收websocket服务端广播数据，解析数据；

5. 我是通过vue的watch监听数据变化

6. vue项目添加three 3D引擎，加载gltf模型文件（原始模型是solidworks的 sw文件，通过3Dmax或者其他的3D工具转换成gltf），模型格式转换有很多种，对这一块有需要后面可以单独说

7. watch监听的数据触发3D引擎的模型动画，因为模型是solidworks设计图纸，是1：1转成的gltf模型，接收到的plc数据基本可以做到和真实设备一致，只有少数动作需要微调

8. 模型动画用到了缓间动画tweenjs，感兴趣的可以去google一下；

总结：步骤大概是这么多，每一项都涉及到了一个知识点，都需要单独去了解，对不懂的知识点可以咨询相关技术人员了解可行性，和实现难度。

说了这么多屁话，看看我做的例子吧：

Rec 0002_哔哩哔哩_bilibili 这个是展示一下plc数据更新频率，因为传输时通过opc，大概在200毫秒更新一次数据；

Rec 0004_哔哩哔哩_bilibili 这个是界面端展示的仿真动画，为了第一次写文章专门注册了哔哩哔哩账号上传的视频，希望感兴趣的人能看到吧

放张截图

UI界面没有经过任何美工设计，是我做了几个关联的展示界面，主要用于演示功能。

传统的制造业技术转型是必然趋势，js的跨平台和html5的界面展示效果和开发维护比传统的cs架构要优秀太多太多。

说一下老程序员的心声，如果您有类似的项目需求，可以联系我；目前我在深圳，邮箱: maomaowang209@gmail.com

希望有好的反馈，也希望能坚持下去。

PLC浏览器端机械动画仿真（nodejs、vue）相关推荐

vue服务端渲染浏览器端缓存（keep-alive）
在使用服务器端渲染时,除了服务端的接口缓存.页面缓存.组建缓存等,浏览器端也避免不了要使用缓存,减少页面的重绘. 这时候我们就会想到vue的keep-alive,接下来我们说一下keep-alive的 ...
vue在浏览器端报错：Module not found: Error: Can't resolve 'common/js/util' in 'E:\vue-exercise\sell\src'
在用vue开发的时候,在浏览器端报错: Module not found: Error: Can't resolve 'common/js/util' in 'E:\vue-exercise\sell ...
基于plc的隧道式，门框式全自动洗车机控制，组态王动画仿真
基于plc的隧道式,门框式全自动洗车机控制,组态王动画仿真,带PLC源代码,组态王源代码,图纸,IO地址分配id=639684592600&
基于S7-200 PLC和MCGS组态的水箱水位控制系统设计组态王动画仿真，带PLC源代码,plc程序每一条都带着解释
基于S7-200 PLC和MCGS组态的水箱水位控制系统设计组态王动画仿真,带PLC源代码,plc程序每一条都带着解释,组态王源代码,图纸,IO地址分配 ID:7269672992996086Hol ...
基于plc的污水处理，组态王动画仿真，带PLC源代码,组态王源代码，图纸，IO地址分配
基于plc的污水处理,组态王动画仿真,带PLC源代码,组态王源代码,图纸,IO地址分配 YID:1390639930221182
基于组态王和S7-200 PLC的六层电梯8层电梯控制组态王动画仿真，带PLC源代码,plc程序每一条都带着解释
基于组态王和S7-200 PLC的六层电梯8层电梯控制组态王动画仿真,带PLC源代码,plc程序每一条都带着解释,组态王源代码,图纸,IO地址分配 ID:6465675194299424Holly1 ...
基于s7—1200的电梯控制，wincc hmi动画仿真，带PLC源代码
基于s7-1200的电梯控制,wincc hmi动画仿真,带PLC源代码,hmi源代码,图纸,IO地址分配id=639682504507&
thinkphp开发的小程序、公众号H5、浏览器端H5、前端vue框架开发
需要程序代码的可以找我提供用户端包含:小程序.公众号H5.浏览器端H5 序号功能模块简介 1 商品商品分类支持两级分类,分类可添加分类图标,可设置排序和是否显示,支持分类搜索. 2 商品管理 ...
「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源
包管理器托管JavaScript库并提供用于获取和打包它们的工具. npm - npm是JavaScript的包管理器. Bower - 网络包管理器. component - 用于构建更好的Web ...
nodejs+vue+elementui休闲娱乐美食优惠卷商城销售系统
前端技术:nodejs+vue+elementui,视图层其实质就是vue页面,通过编写vue页面从而展示在浏览器中,编写完成的vue页面要能够和控制器类进行交互,从而使得用户在点击网页进行操作时能够 ...

PLC浏览器端机械动画仿真（nodejs、vue）

PLC浏览器端机械动画仿真（nodejs、vue）相关推荐

最新文章

热门文章