前言
隨着城市建設的高速發展，優化環境管理與服務一直是關注的重點，也是一項民生重要工程。不斷改善市民的生活居住環境，將融入了新一代的信息技術，打造智慧城市建設。首要是解決城市垃圾作為一大難題，而且對智慧城市發展充滿了諸多挑戰。重要的一點是，有數據顯示，我國生活垃圾產量超過4億噸。我國600多座大中城市中，三分之二陷入垃圾包圍之中，四分之一城市已沒有堆放垃圾的合適場所，對於垃圾環境的治理迫在眉睫，到2019年6月25日，生活垃圾分類制度將入法。對於
新基建也在緊鑼密鼓地實施中，
工業互聯網的運用同樣可以在垃圾分類的
智能管理上實現，通過
自動化機械臂的實現，我們可以搭載出一套應用於工業物聯網的智能一體化的垃圾分類機械臂。
HT for Web
不止自主研發了強大的基於 HTML5 的 2D、3D 渲染引擎，為可視化提供了豐富的展示效果。介於 2D 組態和 3D 組態上，Hightopo（以下簡稱 HT ）的 HT for Web 產品上的有着豐富的組態化可供選擇，本文將運用 HT 搭載出一個機械臂垃圾分類的案例以及垃圾分類知識趣味問答。
界面簡介及效果預覽
案例所體現的功能是，傳送帶上運輸的垃圾，通過機械臂的動作將其垃圾分類至對應的垃圾桶當中，起到垃圾分類演示的作用。其次，點擊對應的垃圾桶，還可以視角轉移並鎖定該垃圾桶，彈出提示窗口來介紹這個垃圾桶所划分的垃圾分類發范疇，起到解釋說明的作用。
系統分析
垃圾分類，一般是指按一定規定或標准將垃圾分類儲存、分類投放和分類搬運，從而轉變成公共資源的一系列活動的總稱。分類的目的是提高垃圾的資源價值和經濟價值，力爭物盡其用。垃圾在分類儲存階段屬於公眾的私有品，垃圾經公眾分類投放后成為公眾所在小區或社區的區域性准公共資源，垃圾分類搬運到垃圾集中點或轉運站后成為沒有排除性的公共資源。從國內外各城市對生活垃圾分類的方法來看，大致都是根據垃圾的成分、產生量，結合本地垃圾的資源利用和處理方式來進行分類的。
一、分類目的
分類的目的就是為了將廢棄物分流處理，利用現有生產制造能力，回收利用回收品，包括物質利用和能量利用，填埋處置暫時無法利用的無用垃圾。
二、分類的好處
1、
減少占地：生活垃圾中有些物質不易降解，使土地收到嚴重侵蝕。垃圾分類，去掉可以回收的、不易降解的物質，減少垃圾數量達60%。
2、
減少污染：目前我國的垃圾處理多采用衛生填埋甚至簡易填埋的方式，占用上萬畝土地，並且蟲蠅亂飛、污水四溢、臭氣熏天，嚴重污染環境。
3、
變廢為寶：垃圾中的其他物質也能轉化為資源，如食品、草木和織物可以堆肥，生產有機肥料；垃圾焚燒可以發電、供熱或制冷；磚瓦、灰土可以加工成建材等等。
三、分類的現狀
1、
可回收垃圾：是指適宜回收和可循環再利用的物品，如紙制品、塑料制品、玻璃制品、紡織品和金屬等；
2、
廚余垃圾：是指餐飲垃圾、家庭廚余垃圾和廢棄的蔬菜、瓜果、花木等；
3、
有害垃圾：是指對人體健康、自然環境危害的物質，如廢棄的充電電池、紐扣電池、燈管、醫葯用品、油漆、化學品、廢棄的農葯、化肥殘余及包裝物等；
4、
其他垃圾：是指前三項以外的生活垃圾，如惰性垃圾，不可降解的一次性用品、普通無汞電池、煙蒂、紙巾、家庭裝修廢棄物、廢棄家具等。
效果實現
一、機械臂動畫效果
案例主要是通過動畫來實現的，而其動畫的核心機制是使用了
HT 內部封裝的動畫函數
ht.Default.startAnim()，通過啟動一個動畫對象來使整個動畫運行起來，ht.Default.starAnim() 支持 Frame-Based 和 Time-Based 兩種方式的動畫，Frame-Based 的方式是用戶通過指定 frames 動畫幀數，以及 interval 動畫幀間隔參數來控制動畫效果，而 Time-Based 的方式是用戶只需要指定 duration 的動畫周期的毫秒數即可，HT 將在指定的時間周期內完成動畫；還設定了 delay 動畫延遲執行的時間來搭配動畫實現的效果；easing 參數則是用於讓用戶自定義函數，通過數學公式控制動畫，如勻速變化、先慢后快等效果；其中最重要的就是 action 動畫執行函數和 finishFunc 動畫結束回調函數，通過一些效果的搭配使用，可以使用戶達到平滑的動畫效果。
機械臂的實現是通過，對機械模型細節零件的拆分，其次通過 HT 封裝的動畫函數 ht.default.startAnim() 依次執行各個細節零件的動畫，對應所拆分的機械模型細節零件為：
機械臂的動作是通過一套動畫流程的往復實施來實現的，而實施的機械流程為：
機械臂的動畫參考了網上許多機械臂專業的視頻，學習它的運動模式和動作細節，對每個結構和部位的動畫進行步驟的排序和構思。這里我挑選幾處動畫的實現方式來展示：
這一段動畫是機械臂從初始化狀態到向下抓取的一個過程，我將每段動畫分成函數來寫比較方便后續管理，每一處也代表了一個步驟。這其中最復雜且細微的步驟要數液壓桿的運動了，為了讓動畫看起來更加真實，我除了將手臂單獨運動的過程中加入了延時執行下一段動畫以體現機器運動的特點外，也把液壓桿的部分也做了動畫，如果不做處理，那么機械臂在上下移動的時候就會有不科學的效果出現。動畫函數在各種應用場景中使用得最廣，而且里面也包含了一些緩動函數，搭配上自己的動畫需求，可以實現很多不一樣的動畫效果。
這里面的拾取垃圾步驟采用了是 HT 的吸附功能，有興趣的話可以通過
吸附 的文章介紹來了解這一機制的運用。這個方法非常的適合抓取物體的動作，通過 setHost 使節點吸附於宿主，這樣就相當於子節點跟隨父節點移動，此時只需要對機械臂進行偏移和旋轉的操作，垃圾便會隨之一起運動了，大大減少了工作量！
二、場景的陰影效果
還有一部分更酷的屬性設置給大家展示一下，可以讓 3D 場景整體擁有更真實的陰影處理效果。首先我們要注意將無關的節點陰影通過 node.s('shadow.cast', false) 關閉，比如編組用的 box，背景、地板和面板等。
最后我們就把陰影的細節做下調整，達到比較好的效果：
三、垃圾分類知識趣味問答
除了垃圾分類的系統演示以外，我們還實現了一個關於垃圾分類的知識趣味問答，所實現的方式是借助 HT 上 2D 組態特有的矢量圖標，加上一些題目庫和答題反饋效果的補充而完成的，有興趣的小伙伴可以考驗一下自己對於垃圾分類的辨識能力：
垃圾分類知識趣味問答。
趣味問答在垃圾桶圖標的使用上是采用 HT 的矢量圖標，而中間的選項則采用普通的圖片 png 和 jpg 格式，其中可以明顯地看出之間觀感上的區別，HT 的矢量圖標本質上擁有適應不同屏幕大小而不失真的情況下存在，加上 HT 上特有的
數據綁定機制，我們可以在問答點擊對應垃圾桶的同時，對所點擊的對象進行一系列的動畫操作，例如垃圾桶的搖晃或者是答題正誤的反饋，都是通過綁定 tag，並對其做一些動畫數據的變動來達到的效果。
而矢量呢？在 HT 中是
矢量圖標的簡稱，常見的 png 和 jpg 這類的柵欄格位圖，通過儲存每個像素的顏色信息來描述圖形，這種方式的圖片在放大或縮小時會出現圖形模糊，線條變粗出現鋸齒等問題。而矢量圖片通過點、線和多邊形來描述圖形。因此在無限放大和縮小圖片的情況下依然能保持一致的精確度。所以矢量不僅僅運用在普通的案例小游戲中，在眾多
大屏的展示效果上也是極其完美的，搭配上 HT 的
布局機制，不但在各自的大屏上運用自如，在電腦顯示終端，甚至手機端都能完美地適配。
總結
垃圾分類是對社區治理水平的一次測試，也是促進社區治理能力提升的契機。社區治理精細化，不僅需要人情味，也需要科技范兒。期待在不久的將來，每一個社區都能成為一個個神經元細胞，共同連接成智慧城市的“大腦”，讓我們的生活更美好！
同樣的在規范管理的同時，HT 也努力打造了許多好玩的動畫流程，例如
醫療站的實現，同樣是運用完整的機械傳輸流程來介紹醫療站之間的運作關系：
2019 我們也更新了數百個工業互聯網 2D/3D 可視化案例集，在這里你能發現許多新奇的實例，也能發掘出不一樣的工業互聯網：
https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA
同時，你也可以查看更多案例及效果：
https://www.hightopo.com/demos/index.html