基於 HTML5 WebGL 的垃圾分類系統

来源:https://www.cnblogs.com/xhload3d/archive/2019/10/08/11633965.html

垃圾分類,一般是指按一定規定或標准將垃圾分類儲存、分類投放和分類搬運,從而轉變成公共資源的一系列活動的總稱。分類的目的是提高垃圾的資源價值和經濟價值,力爭物盡其用。垃圾在分類儲存階段屬於公眾的私有品,垃圾經公眾分類投放後成為公眾所在小區或社區的區域性準公共資源,垃圾分類搬運到垃圾集中點或轉運站後成... ...


前言

垃圾分類,一般是指按一定規定或標准將垃圾分類儲存、分類投放和分類搬運,從而轉變成公共資源的一系列活動的總稱。分類的目的是提高垃圾的資源價值和經濟價值,力爭物盡其用。垃圾在分類儲存階段屬於公眾的私有品,垃圾經公眾分類投放後成為公眾所在小區或社區的區域性準公共資源,垃圾分類搬運到垃圾集中點或轉運站後成為沒有排除性的公共資源。從國內外各城市對生活垃圾分類的方法來看,大致都是根據垃圾的成分、產生量,結合本地垃圾的資源利用和處理方式來進行分類的。到2019年6月25日,生活垃圾分類制度將入法。一套應用於工業物聯網的智能一體化的垃圾分類機械臂將隨之而來,由此,我應用 HT for Web  的圖型化編輯工具打造了一款形象生動的例子:Garbage classification,也藉此機會與大家一起分享和學習。

代碼實現

(註:gif 的上傳大小有限,實際效果與還請參考 demo 鏈接)

首先,我應用已經精心佈置好的 3D 場景,為了有更好的操作體驗感,我們要從它的基本設置開始:

gv.setMovableFunc(() => { return false }) // 禁止拖動
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([ new ht.graph3d.MapInteractor(gv) ]) // 設置交互限制
gv.setSkyBox(dm.getDataByTag('skyBox')) // 設置天空球
window.document.oncontextmenu = () => { return false } // 全局設置右鍵菜單禁用
gv.scene = { // 複製初始位置
    eye: ht.Default.clone(gv.getEye()),
    center: ht.Default.clone(gv.getCenter()),
    far: ht.Default.clone(gv.getFar()),
    near: ht.Default.clone(gv.getNear()),
}

我複製了一下整個場景的初始視角情況方便我做稍後的處理,我監聽了部分滑鼠事件來形成自己的操作風格(比如雙擊背景還原視角以及雙擊模型拉近視角):

gv.mi(e => {
    let data = e.data
    let kind = e.kind
    if (kind === 'doubleClickBackground') { // 雙擊背景
        gv.moveCamera(this.gv.scene.eye, this.gv.scene.center, {duration : 1000}) // 恢復視角
    }
    else if (kind === 'doubleClickData') { // 雙擊模型
        gv.flyTo(data, {animation : {duration : 500}, distance : 800}) // 拉近視角
    }
})

好了,準備工作做好了,下麵來實現動畫部分,除了瞭解 垃圾分類 的方式外我還參考了網上很多機械臂的視頻,學習它的運動模式和動作細節,對每個結構和部位的動畫進行步驟的排序和構思。這裡我挑選幾處動畫的實現方式來展示:

function mechanicalArmAnim1() {
  ht.Default.startAnim({
    duration: 1000,
    easing: (t) => { return t },
    action: (v, t) => {
      postbrachium.r3(degrees(0) + (degrees(20) - degrees(0)) * v, postbrachium.r3()[1], postbrachium.r3()[2]) // 後臂向下移
    },
    finishFunc: () => {
      setTimeout(() => {
        mechanicalArmAnim2()
      }, 300)
    }
  })
}
function mechanicalArmAnim2() {
  ht.Default.startAnim({
    duration: 1000,
    easing: (t) => { return t },
    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)
    }
  })
}
function mechanicalArmAnim3() {
  let oldValue = antebrachium.r3()[0]
  ht.Default.startAnim({
    duration: 1000,
    easing: (t) => { return t },
    action: (v, t) => {
      hydraulicRod1.r3(degrees(8) + (degrees(7) - degrees(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伸長
      postbrachium.r3(degrees(20) + (degrees(25) - degrees(20)) * v, postbrachium.r3()[1], postbrachium.r3()[2]) // 後臂向下移
      antebrachium.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,背景,地板和麵板等。

最後我們就把陰影的細節做下調整,達到比較好的效果:

gv.enableShadow(true, {
  degreeX : 0,       // 投影 x 軸角度
  degreeZ : -25,      // 投影 z 軸角度
  intensity : 0.3,    // 陰影強度, 1 為黑色
  quality : 'high',  // low / medium / high / ultra / 4096數值, 質量
  type : 'soft',     // none / hard / soft
  radius : 0.2,      // type 為 hard / soft 時,補充的邊緣厚度,用來提供更柔和的邊緣
  bias : -0.003     // 深度浮點偏差補足
})

總結

更多動畫 demo 以及工業化領域的文章請繼續關註我的博客,感謝大家的支持!

醫療站(https://www.cnblogs.com/htdaydayup/p/11558748.html

在工業物聯網從嬰兒走到青年的成熟道路上,一定會有更多的潛力和挑戰在等著我們,等待我們去開發,等待我們去創造!相信我們的技術成為國際水準會指日可待!同時在十一國慶後的第一個工作日祝大家精神飽滿,工作順利!


您的分享是我們最大的動力!

更多相關文章
  • 寫在前面 在真正的前端開發中,我們很少去寫行內樣式和內嵌樣式,通常都是去引用外部樣式。 而在我們學習之初的外部樣式表都是用link引入的,但是當後來我們學習的逐漸深入,發現@import也可以引入樣式。那麼同樣是引入外部樣式,這兩者有什麼區別呢,下麵請跟隨我來詳細瞭解一下link和@import的區 ...
  • 1、我們先設置兩個盒子大小,顏色等等,然後定位重疊在一起,最後再進行動畫設置 例子如下: 2、效果如下: 恢復內容結束 ...
  • 一、屬性的認識 :link 表示滑鼠點擊之前,也稱為原始狀態; :visited 表示滑鼠點擊之後狀態; :hover 表示滑鼠懸停狀態; :active 表示滑鼠點擊狀態; L-V-H-A LV愛 HA恨 二、例子 運行結果是: 1、初始,未訪問狀態 2、滑鼠懸停時狀態 3、點擊是狀態 4、點擊之 ...
  • 大家好!先上圖看看本次案例的整體效果。 實現思路: 實現步驟如下: store: 以上就是大轉盤抽獎核心步驟的整體思路,歡迎討論。 Vue.js實戰之游戲抽獎系列全集 ↓↓↓↓↓↓↓↓↓↓↓ 【Vue.js實戰案例】- Vue.js實現老虎-機抽獎總結 【Vue.js實戰案例】- Vue.js實現九 ...
  • 參考:https://blog.csdn.net/xxjmlgb/article/details/49467717 ...
  • 解構:ES6允許按照一定模式,從數組和對象中提取值,對變數進行賦值。 對象的解構與數組有一個重要的不同。數組的元素是按次序排列的,變數的取值由他的位置決定;而對象的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。 變數解構賦值的用途:交換變數的值,從函數返回多個值,函數參數的定義,提取JSON數 ...
  • Let:用來聲明變數,但是所聲明的變數,只在let命令所在的代碼塊內生效。 變數提升:變數可以在聲明之前使用,值為undefined。 暫時性死區:在代碼塊內,使用let命令聲明變數之前,該變數都是不可用的。 不允許重覆聲明:let不允許在相同作用域內,重覆聲明同一變數。 Const:const聲明 ...
  • 本文僅限於入門級,沒有成規模製作,希望能對你有所幫助。 因為在開發多個項目中可能會用到同一個組件,那麼我們通過複製粘貼的形式更新,無異於是笨拙的,我們可以通過上傳到npm後,不斷迭代npm包來實現更新。 前期準備 初始化project 這裡我們使用 來初始化一個vue項目。 or 首先我們來開發一個 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...