前言垃圾分类泛指按照一定的规定或标准对垃圾进行分类储存、放置、运输，从而转化为公共资源的一系列活动的总称。分类的目的是增加垃圾的资源价值和经济价值，力求物尽其用。垃圾在分类存放阶段属于公众的私有财产。垃圾经过公众分类后，成为公众居住的社区或社区中的区域性准公共资源。垃圾经过分类运至垃圾收集点或转运站后，就成为一种非排他性的公共资源。从国内外城市对生活垃圾分类的方法来看，一般是根据垃圾的成分和产生量，结合当地垃圾的资源利用和处理方式进行分类。2019年6月25日前，生活垃圾分类制度正式实施。一套应用于工业物联网的智能一体化垃圾分类机械臂将随之而来。因此，我利用HTforWeb的图形化编辑工具做了一个生动的例子：Garbageclassification，也借用一下，借此机会和大家分享学习。代码实现（注：gif上传大小有限，实际效果请参考demo链接）首先，我应用了精心布置好的3D场景。为了有更好的操作体验，我们先从它的基本设置入手：gv.setMovableFunc(()=>{returnfalse})//禁止拖动gv.getWireframe=(d)=>{d.s('wf.visible',false)}//隐藏选中的帧gv.setEye([583,-212,-789])//设置眼睛gv.setCenter([-76,-654,-133])//设置中心点gv.setFar(100000)//设置远端位置gv.setNear(10)//设置近端位置gv.setInteractors([newht.graph3d.MapInteractor(gv)])//设置交互限制gv.setSkyBox(dm.getDataByTag('skyBox'))//设置天空球window.document.oncontextmenu=()=>{returnfalse}//全局设置上下文菜单禁用gv.scene={//复制初始位置eye:ht.Default.clone(gv.getEye()),ce输入：ht.Default.clone(gv.getCenter()),far:ht.Default.clone(gv.getFar()),near:ht.Default.clone(gv.getNear()),}我复制了整个场景的初始视角方便我做后期处理。我监听一些鼠标事件，形成自己的操作风格（比如双击背景还原视角，双击模型放大）：gv.mi(e=>{letdata=e.dataletkind=e.kindif(kind==='doubleClickBackground'){//双击背景gv.moveCamera(this.gv.scene.eye,this.gv.scene.center,{duration:1000})//恢复视角}elseif(kind==='doubleClickData'){//双击模型gv.flyTo(data,{animation:{duration:500},distance:800})//放大视图angle}})好了，准备工作做好了，下面来实现动画部分。除了了解垃圾分类的方式外，我还参考了网上很多机械臂的视频，了解它的运动方式和动作细节，并将各个结构和部位动画化。对步骤进行排序和构思。这里我选择几个动画实现来展示：:(v,t)=>{postbrachium.r3(degrees(0)+(degrees(20)-degrees(0))*v,postbrachium.r3()[1],postbrachium.r3()[2])//拖臂向下移动 }, finishFunc:()=>{ setTimeout(()=>{ mechanicalArmAnim2() },300) } })}functionmechanicalArmAnim2(){ ht.Default.startAnim({ duration:1000, easing:(t)=>{returnt}, action:(v,t)=>{ postbrachium.p3(-208+(-184+208)*v,postbrachium.p3()[1],postbrachium.p3()[2])//后臂伸展 hydraulicRod1.r3(degrees(0)+(degrees(8)-degrees(0))*v,hydraulicRod1.r3()[1],hydraulicRod1.r3()[2])//液压杆1是倾斜的 extensionRod1.r3(degrees(0)+(degrees(8)-degrees(0))*v,extensionRod1.r3()[1],extensionRod1.r3()[2])//延长杆1倾斜 extensionRod1.p3(-169+(-185+169)*v,-516+(-511+516)*v,extensionRod1.p3()[2])//延长杆1被延长 hydraulicRod2.r3(degrees(0)+(degrees(-8)-degrees(0))*v,hydraulicRod2.r3()[1],hydraulicRod2.r3()[2])//液压杆2是倾斜的 extensionRod2.r3(degrees(0)+(degrees(-8)-degrees(0))*v,extensionRod2.r3()[1],extensionRod2.r3()[2])//延长杆2是倾斜的 extensionRod2.p3(-169+(-185+169)*v,-516+(-511+516)*v,extensionRod2.p3()[2])//延长杆2延长了 }, finishFunc:()=>{ setTimeout(()=>{ mechanicalArmAnim3() },300) } })}functionmechanicalArmAnim3(){ letoldValue=antebrachium.r3()[0] ht.Default.startAnim({ duration:1000, easing:(t)=>{returnt}, action:(v,t)=>{ hydraulicRod1.r3(度数(8)+(度数(7)-度数(8))*v,hydraulicRod1.r3()[1],hydraulicRod1.r3()[2])//液压杆1倾斜 extensionRod1.r3(degrees(8)+(degrees(7)-degrees(8))*v,extensionRod1.r3()[1],extensionRod1.r3()[2])//延长杆1倾斜 extensionRod1.p3(-185+(-186+185)*v,-511+(-507+511)*v,extensionRod1.p3()[2])//延长杆1拉伸 hydraulicRod2.r3(degrees(-8)+(degrees(-7)-degrees(-8))*v,hydraulicRod2.r3()[1],hydraulicRod2.r3()[2])//液压杆2倾斜 extensionRod2.r3(degrees(-8)+(degrees(-7)-degrees(-8))*v,extensionRod2.r3()[1],extensionRod2.r3()[2])//延长杆2倾斜 extensionRod2.p3(-185+(-186+185)*v,-511+(-507+511)*v,extensionRod2.p3()[2])//延长杆2延长 后臂。r3(degrees(20)+(degrees(25)-degrees(20))*v,postbrachium.r3()[1],postbrachium.r3()[2])//后臂下移 前臂.r3(oldValue+(degrees(-40)-oldValue)*v,antebrachium.r3()[1],antebrachium.r3()[2])//将前臂向下移动 claw1.r3(degrees(-20)+(degrees(-60)-degrees(-20))*v,claw1.r3()[1],claw1.r3()[2])//上爪抓 claw2.r3(degrees(-60)+(degrees(-30)-degrees(-60))*v,claw2.r3()[1],claw2.r3()[2])//下爪抓 }, finishFunc:()=>{ mechanicalArmAnim4() } })}这个动画是机械臂从初始化状态到向下抓取的过程。我把每个动画都分成功能，方便后续管理。每个部分也代表一个步骤。最复杂和微妙的步骤是液压杆的运动。为了让动画看起来更逼真，我添加了一个延迟，在手臂单独运动的过程中执行下一个动画，以体现机器运动的特点。液压杆的部分也有动画。如果不处理，机械臂上下运动时会有不科学的效果。动画功能是这个demo中用的最多的，同时也包含了一些缓动功能。有兴趣的博主可以点这里自己玩一下~这里捡垃圾的步骤也套用了我之前介绍的吸附功能，非常适合抓取物体的动作。节点通过setHost吸附到宿主机上，相当于子节点跟随父节点移动。此时只需要机械臂的偏移和旋转操作即可，垃圾会随之移动，大大减轻了工作量！还有一些比较酷的属性设置给大家看，可以让3D场景整体上有更逼真的阴影处理效果。首先要注意通过node.s('shadow.cast',false)关闭不相关的节点阴影，比如用于分组的box、background、floor、panel。最后，我们调整阴影的细节以获得更好的效果：gv.enableShadow(true,{ degreeX:0,//projectionx-axisangle degreeZ:-25,//projectionz-axisAngle intensity:0.3,//阴影强度，1为黑色 quality:'high',//low/medium/high/ultra/4096values,quality type:'soft',//none/hard/soft radius:0.2,//当类型是硬/软时，增加的边缘厚度用于提供更软的边缘 bias:-0.003//深度浮点偏差补数})结论在工业物联网逐步走向成熟的道路上，一定会有更多的挑战等待着我们！
