基于 WebGL 的 HTML5 3D 棉花加工监控系统

前言

现在的棉花加工行业还停留在传统的反应式维护模式当中，当棉花加下厂的设备突然出现故障时，控制程序需要更换。这种情况下，首先需要客户向设备生产厂家请求派出技术人员进行维护，然后生产厂家才能根据情况再派人到现场进行处理。由于棉花加工设备分布在中国各地乃至出口到世界各地，从客户反应问题到厂家派人到达现场的时间周期就会很长，少则 一天，个别偏远的地方可能会需要几天，不同程度地影响到企业生产活动的继续进行。传统的反应式维护存在以下缺点：售后服务响应速度慢；维护成本高；生产效率低下；停车率高；管理成本高；无法应对合格工程师不足的情况。

远程监控系统主要是通过分布于棉花加工生产线各种设备的传感器、开关信 、视频监控设备、 PLC 控制器等装置，通过智能联 设备集成到互联 和局域 上面，实现对生产、运营情况的随时掌握，建立 络范围内的监控数据和 上知识资源库，根据现场采集的设备运行数据进行远程诊断和在线维修。

场景动画

因为整个场景中的元素都是从此 JSON 文件中反序列化出来的，此 JSON 文件中保存的只有场景的内容，并不包括动画以及交互，对于不同部分的元素的动画也不同，我们需要单独将这些元素取出来，这里通过 dm.getDataByTag(tag) 方法实现(https://hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html#ref_datamodel)，此方法通过 tag 唯一标识来获取节点的信息：

注意，要使用动画，首先您需要调用 ht.DataModel#enableAnimation(interval) 启动全局动画定时器，默认 interval 为 16ms，如果不设置此参数值，则 DataModel 定时器每隔 16ms 左右就会遍历自己所有的 Data，根据 Data 的 animation 配置执行动画。

表单创建

// 创建 form 表单function createForm() {    var fp = new ht.widget.FormPane(); // 创建表单组件实例    fp.setWidth(200); // 设置表单组件的宽度    fp.setHeight(250); // 设置表单组件的高度    fp.getView().style.top = '8%'; // 设置表单组件的样式    fp.getView().style.right = 0;    fp.getView().style.background = 'rgba(255, 255, 255, 0.3)';    document.body.appendChild(fp.getView()); // 将表单组件的底层 div 添加到 body 体中    var equipment = dm.getDataByTag('equipment'); // 通过 tag 唯一标识获取元素    var hand = dm.getDataByTag('hand');    fp.setLabelAlign('right'); // 设置表单的文本对齐方式    fp.addRow([ // 向表单中添加一行  此方法的参数一为元素数组，可在一行中添加多个元素{ // 元素一  显示文本内容为 “机器 ”    element: '机器 ',    color: '#fff'},{ // 元素二 显示文本内容为 “Machine”    element: 'Machine',    color: '#fff'}    ], [0.1, 0.1]); // 参数二为每个元素宽度信息数组，宽度值大于1代表固定绝对值，小于等于1代表相对值，也可为80+0.3的组合    fp.addRow([ // 向表单中添加一行  此方法的参数为一个数组，可在一行中添加多个元素{ // 元素一  显示文本内容为 “机器 ”    element: '抓棉机动画',    color: '#fff'},{ // 元素二  显示文本内容为 一个按钮元素    button: { label: '开始', onClicked: function() { // 按钮点击触发事件，启动轧棉机左右移动动画dm.enableAnimation(); // 启动全局动画定时器var light = dm.getDataByTag('light');if (!light) return;lightColor(light);colorTimer = setInterval(function() { lightColor(light);}, 1000); }    }},{    button: { label: '停止', onClicked: function() { // 按钮点击触发事件，关闭轧棉机左右移动动画dm.disableAnimation(); // 停止全局动画定时器clearInterval(colorTimer);var light = dm.getDataByTag('light');if (

                                                        
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！