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

前言

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

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

http://www.hightopo.com/demo/Plucker/

代码实现

 创建场景

首先是创建一个三维场景，通过将场景中的元素添加到保存数据的数据容器中即可：

var dm = new ht.DataModel();// 数据容器
var g3d = new ht.graph3d.Graph3dView(dm);// 三维组件
g3d.addToDOM();// 将三维组件添加到 body 体中

上面代码中出现的 addToDOM 方法是将调用此方法的组件通过 getView 方法获取到此组件的底层 div，随后将此 div 添加到 body 体中。HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的HT组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM 元素中，这里需要注意的是，当父容器大小变化时，如果父容器是 BorderPane 和 SplitView 等这些HT预定义的容器组件，则HT的容器会自动递归调用孩子组件 invalidate 函数通知更新。但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。

为了最外层组件加载填充满窗口的方便性，HT 的所有组件都有 addToDOM 函数，其实现逻辑如下，其中 iv 是 invalidate 的简写：