前言
HT for Web 不止自主研发了强大的基于 HTML5 的 2D、3D 渲染引擎,为可视化提供了丰富的展示效果。介于 2D 组态和 3D 组态上,Hightopo(以下简称 HT )的 HT for Web 产品上的有着丰富的组态化可供选择,本文将运用 HT 搭载出一个机械臂垃圾分类的案例以及垃圾分类知识趣味问答。
界面简介及效果预览

系统分析
垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用。垃圾在分类储存阶段属于公众的私有品,垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源,垃圾分类搬运到垃圾集中点或转运站后成为没有排除性的公共资源。从国内外各城市对生活垃圾分类的方法来看,大致都是根据垃圾的成分、产生量,结合本地垃圾的资源利用和处理方式来进行分类的。一、分类目的
分类的目的就是为了将废弃物分流处理,利用现有生产制造能力,回收利用回收品,包括物质利用和能量利用,填埋处置暂时无法利用的无用垃圾。二、分类的好处
- 减少占地:生活垃圾中有些物质不易降解,使土地收到严重侵蚀。垃圾分类,去掉可以回收的、不易降解的物质,减少垃圾数量达60%。
- 减少污染:目前我国的垃圾处理多采用卫生填埋甚至简易填埋的方式,占用上万亩土地,并且虫蝇乱飞、污水四溢、臭气熏天,严重污染环境。
- 变废为宝:垃圾中的其他物质也能转化为资源,如食品、草木和织物可以堆肥,生产有机肥料;垃圾焚烧可以发电、供热或制冷;砖瓦、灰土可以加工成建材等等。
三、分类的现状
- 可回收垃圾:是指适宜回收和可循环再利用的物品,如纸制品、塑料制品、玻璃制品、纺织品和金属等;
- 厨余垃圾:是指餐饮垃圾、家庭厨余垃圾和废弃的蔬菜、瓜果、花木等;
- 有害垃圾:是指对人体健康、自然环境危害的物质,如废弃的充电电池、纽扣电池、灯管、医药用品、油漆、化学品、废弃的农药、化肥残余及包装物等;
- 其他垃圾:是指前三项以外的生活垃圾,如惰性垃圾,不可降解的一次性用品、普通无汞电池、烟蒂、纸巾、家庭装修废弃物、废弃家具等。

效果实现
一、机械臂动画效果
案例主要是通过动画来实现的,而其动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim(),通过启动一个动画对象来使整个动画运行起来,ht.Default.starAnim() 支持 Frame-Based 和 Time-Based 两种方式的动画,Frame-Based 的方式是用户通过指定 frames 动画帧数,以及 interval 动画帧间隔参数来控制动画效果,而 Time-Based 的方式是用户只需要指定 duration 的动画周期的毫秒数即可,HT 将在指定的时间周期内完成动画;还设定了 delay 动画延迟执行的时间来搭配动画实现的效果;easing 参数则是用于让用户自定义函数,通过数学公式控制动画,如匀速变化、先慢后快等效果;其中最重要的就是 action 动画执行函数和 finishFunc 动画结束回调函数,通过一些效果的搭配使用,可以使用户达到平滑的动画效果。

机械臂的动作是通过一套动画流程的往复实施来实现的,而实施的机械流程为:

机械臂的动画参考了网上许多机械臂专业的视频,学习它的运动模式和动作细节,对每个结构和部位的动画进行步骤的排序和构思。这里我挑选几处动画的实现方式来展示:

这一段动画是机械臂从初始化状态到向下抓取的一个过程,我将每段动画分成函数来写比较方便后续管理,每一处也代表了一个步骤。这其中最复杂且细微的步骤要数液压杆的运动了,为了让动画看起来更加真实,我除了将手臂单独运动的过程中加入了延时执行下一段动画以体现机器运动的特点外,也把液压杆的部分也做了动画,如果不做处理,那么机械臂在上下移动的时候就会有不科学的效果出现。动画函数在各种应用场景中使用得最广,而且里面也包含了一些缓动函数,搭配上自己的动画需求,可以实现很多不一样的动画效果。

这里面的拾取垃圾步骤采用了是 HT 的吸附功能,有兴趣的话可以通过 吸附 的文章介绍来了解这一机制的运用。这个方法非常的适合抓取物体的动作,通过 setHost 使节点吸附于宿主,这样就相当于子节点跟随父节点移动,此时只需要对机械臂进行偏移和旋转的操作,垃圾便会随之一起运动了,大大减少了工作量!

二、场景的阴影效果

gv.enableShadow(true, {
// 投影 x 轴角度
degreeX : 0,
// 投影 z 轴角度
degreeZ : -25,
// 阴影强度,1为黑色
intensity : 0.3,
// low / medium / high / ultra / 4096数值,质量
quality : 'high',
// none / hard / soft
type : 'soft',
// type 为 hard / soft 时,补充的边缘厚度,用来提供更柔和的边缘
radius : 0.2,
// 深度浮点偏差补足
bias : -0.003
});
三、垃圾分类知识趣味问答

而矢量呢?在 HT 中是矢量图标的简称,常见的 png 和 jpg 这类的栅栏格位图,通过储存每个像素的颜色信息来描述图形,这种方式的图片在放大或缩小时会出现图形模糊,线条变粗出现锯齿等问题。而矢量图片通过点、线和多边形来描述图形。因此在无限放大和缩小图片的情况下依然能保持一致的精确度。所以矢量不仅仅运用在普通的案例小游戏中,在众多大屏的展示效果上也是极其完美的,搭配上 HT 的布局机制,不但在各自大屏上运用自如,在各自电脑显示终端,甚至手机端都能完美地适配。
总结
同样的在规范管理的同时,HT 也努力打造了许多好玩的动画流程,例如医疗站的实现,同样是运用完整的机械传输流程来介绍医疗站之间的运作关系:

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:mp.weixin.qq.com/s/ZbhB6LO2k…