如何用three.js實作數字孿生、3D工廠、3D工業園區、智慧制造、智慧工業、智慧工廠-第十課 使用webgl(three.js)搭建3D智慧園區、3D大屏，3D樓宇，智慧燈杆三維展示，3D燈杆，web版3D,bim管理系統——第六課

如何用three.js實作數字孿生、3D工廠、3D工業園區、智慧制造、智慧工業、智慧工廠、物聯網3D、物業3D監控、物業基礎設施可視化運維、3d建築,webGL,threejs,3d機房,bim管理系統

文章前，先聊點啥吧。

最近元宇宙炒的挺火熱，在所有人都争相定義元宇宙的時候，資本就開始着手入場了。當定義明确，全民皆懂之後，風口也就過去了。

前兩天看到新聞，新世界CEO宣布購入最大的數字地塊,這塊虛拟土地的投資金額約為  3200 萬元人民币。在這之前新世界以及他購買的虛拟土地持有公司名稱也都是鮮為人知的。這就是資本的力量，即打了廣告，又占了風口坑位，一舉多得，好像現在沒個幾千萬上億的動态，都不足以博得大衆眼球。

那麼何為元宇宙，為何不是元世界、元地球，而是瘋狂到了宇宙這個範圍。如果真的虛拟到了宇宙的無窮無盡，試想一下，一塊虛拟土地能賣到幾千萬？是以重點不在虛拟土地的價格。重點是資本想讓你看到什麼。正所謂，見山不是山，見水不是水......

元宇宙，無論是使用還是創造，隻有落實到具體應用，普及到全民參與，才能真正展現它的價值。試想一下，全球大部分公司都參與到元宇宙的研發，全球很多人都為元宇宙添磚加瓦，真正做到全民參與。那麼元宇宙才真正的發展起來。

是以解決問題的痛點在工具，為全民提供創造元宇宙的工具，才是方向....

 序：

前段時間，做了一個數字孿生的項目，所謂數字孿生，百度百科解釋說，就是充分利用實體模型、傳感器更新、運作曆史等資料，內建多學科、多實體量、多尺度、多機率的仿真過程，在虛拟空間中完成映射，進而反映相對應的實體裝備的全生命周期過程。數字孿生是一種超越現實的概念，可以被視為一個或多個重要的、彼此依賴的裝備系統的數字映射系統。是個普遍适應的理論技術體系，可以在衆多領域應用，在産品設計、産品制造、醫學分析、工程建設等領域應用較多。在國内應用最深入的是工程建設領域，關注度最高、研究最熱的是智能制造領域。

通俗的講，就是利用三維技術，将生産過程、資料監測監控展示出來。

随着物聯網技術發展，資料展示、大屏展示在IT界也是越發的流行與時尚，而這其中所應用到了關鍵的技術WebGL（three.js），也就理所當然的成為了集萬千寵愛于一生的前端焦點。

技術交流 [email protected]

交流微信：

　　　　

如果你有什麼要交流的心得 可郵件我

 一、解決方案

 數字孿生，解決主要在三大步驟：

1、資料采集：主要在傳感器方面，如何選用傳感器，适用不同場景，比如煉鋼廠，需要采用耐高溫傳感器，煤礦采用防靜電傳感器等

2、資料傳輸與存儲：跟傳感器配套方案，是否采用無線方案，或者是有線傳輸，都需要根據實際場景來判斷，還有這中間是否采用中間網關，做資料轉發等。然後就是資料如何存儲與處理。這涉及到平台側的具體架構方案。

3、資料展示：展示方面，為了配合數字孿生這個名詞，隻能采用3D顯示方案。對于3D的方案，光是展時端，我們就可以選擇CS、BS兩種方式的一種。當然，本篇我們選擇BS（webgl）方案。

前兩個部分，後面考慮用較詳細的文章篇幅詳細介紹。本文主要講解資料展示這一層的方案。

二、展示效果與代碼實作

2.1、工業園區整體效果與實作

這裡主要是模組化，與流光效果的實作。對于非重點監控工廠中的房間，我們可以用虛拟建築模型方塊代替。

代碼實作：

 2.2、輕按兩下重點展示工作工廠中的房間，進入工廠中的房間

這裡采用最簡單的頁面跳轉方式，顯示攝像頭推進，然後直接跳轉到另一個頁面，簡單而不失流程。還能充分回收資源。

 2.3、輕按兩下加熱爐，展示加熱爐内部鍛件的詳細資訊，與位置

這裡采用虛化周邊的方案。

 2.4、明顯标注傳感器，并且檢視各部位傳感器資訊。

這裡注意綁定傳感器資料，并且使用突顯方案，顯示傳感器标簽，在任何角度，都能看到傳感器位置。

三、資料驅動，根據工廠中的房間實時動作，在三維内展示實時動作

3.1、軌道機械臂，從加熱爐中取料

實作代碼：

加熱爐動畫：

 3.2、機械臂從中間台上取料

 3.3、機械臂将取到的料放置到壓力機下面

 3.4、壓力機摧壓貨料。

 3.5、機械臂噴霧

這裡實作比較簡單，本可以用粒子方案，後來為了省事，直接用流體方案實作

 3.6、機械臂取出鍛件半成品

 3.7、機械臂将鍛件放置到傳送帶上

 3.8、傳送帶，傳送鍛件至切邊機一側

 3.9、機械臂取出鍛件，放置到切邊機上

 3.10、切邊機，切邊

 3.11、取出切好的鍛件，放到觀測台上觀測

 3.12、取出飛邊毛料，放到對應的框中

其它相關文章：

使用webgl(three.js)建立3D機房，3D機房微子產品詳細介紹(更新版二)

如何用webgl(three.js)搭建一個3D庫房-第一課

如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課

使用webgl(three.js)搭建一個3D建築，3D消防模拟——第三課

使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模拟，web版3D,bim管理系統——第四課

如何用webgl(three.js)搭建不規則建築模型，客流量熱力圖模拟

 使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模拟，web版3D,bim管理系統——第四課（炫酷版一）

如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題（機房更新版）-第九課（一）