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

前言

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

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

上面出现的 ht.Default.xhrLoad 方法是一个封装好的异步加载文件的函数，可以通过这种方法来加载 JSON 文件，因为此方法为异步加载，所以如果要操作此函数反序列化后的数据容器中的元素，需要在此函数中进行后续的操作。

场景动画

因为整个场景中的元素都是从此 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 配置执行动画。

表单创建

总结

以前对 animation 动画用的比较少，这次也是特地用它仔细研究一下 animation 的机制，就 animation 设置的动画能够以一种“平和”的方式进行值的变化，动画也看起来比较有条理一些；当然还有能够设置下一次动画需要做什么的操作，这个设计也非常的人性化；同时还能通过 getDataAnimation 获取对象的动画配置，并通过此方法对对象的动画进行重新配置，这些优点都是值得拿出来跟大家分享的。