#三維可視化##3D開發#
Web端糧堆溫度可視化什麼是B樣條曲線ThingJS 3D引擎技術糧堆的溫度可視化告警
Web端糧堆溫度3D可視化
為了控制穀物儲藏溫度，需要創造一個不利於蟲黴生長低溫環境的儲糧技術環境，然而出於成本考慮以及進出糧的需要，糧堆內的溫度傳感器設置數量有限，因此在儲糧當中測得的溫度值只是傳感器附近的溫度，其他部分則需要利用相應的方法進行數值模擬。
如今，計算機可視化技術畫出相應的三維立體圖像，以便人們得到直觀、有效的結果。面對人們對跨平臺，Web交互等方面的需求越來越強烈以及網際網路技術的飛速發展，網絡三維技術應運而生。網絡三維是一種能實時渲染且具有交互性的網絡技術，突破了地域、平面以及空間的限制，使得人們更便捷地處理相應數據。ThingJS有164個源碼實例下載>>
因此，我們的客戶採用雙B樣條採樣方法進行數值模擬，並從時間和空間域兩方面進行分析，採用B樣條插值函數的方法進行溫度插值擬合，這樣就能夠解決糧食溫度傳感器密度的缺陷，並利用 WebGL技術實現糧堆溫度的可視化。
什麼是B樣條曲線？
B樣條曲線一般應用在計算機輔助設計與製造當中，是一種由大量控制點生成曲線的工具，它具有樣條曲線的普遍特性：
（1）是一條只需要幾個點依次指定的光滑曲線；
（2）可以通過相應算法找到曲線或者曲面的點；
（3）根據人們對近似度的需求，通過迭代計算方法使用線段能足夠準確再現曲線的形狀。
曲線有9個控制點定義，曲線整體趨向控制點，B樣條曲線按照節點分布的情況，分為均勻B樣條曲線和非均勻B樣條曲線。
ThingJS 3D 引擎技術
WebGL直接工作在計算機的顯卡端，Three.js是基於WebGL的3D框架，這是一種在3D圖形中簡單、直觀的建立常見模型的方法，能夠高速利用許多最佳圖形引擎實踐技術，使用流程沿用一般三維世界的基本結構進行定義：設置場景-攝像機-燈光-物體-渲染器，如圖所示。
通過建立一個HTML頁面，在HTML當中添加 canvas元素以便於 WebGL進行渲染，然後再在body上添加 onload事件來接收初始化整個 WebGL環境。於是在頁面加載完成後，調用 onload中的函數， WebGL開始渲染。
ThingJS是近兩年新興的3D類庫，提供在線開發智慧建築、安全消防及倉儲的3D可視化組件，比three.js更加節省開發時間，其中3D場景通過CampusBuilder進行搭建後導入ThingJS平臺，獲取場景URL即可。無論是攝像機、燈光、對象（物體）或渲染器，都不用重新設置，直接JavaScript調用3D腳本進行開發，也可以定製更炫酷的可視化功能。
ThingJS平臺註冊地址
基於ThingJS的傳感器模擬如圖所示，左圖為電腦上運行，右側為手機中運行。
某一糧倉當中糧堆內傳感器排列如圖中球體呈8×6×3矩形排列。每一個球體代表糧堆內相應位置的傳感器，當傳感器提示溫度正常時，球體呈綠色，溫度過高或者過低時，球體呈紅色；數據顯示不正常時呈藍色利用滑鼠拖動整個矩陣，可以從不同角度觀察糧堆內整體情況傳感擬圖。
糧堆溫度的可視化告警
利用雙三次B樣條插值曲面依據各個溫度傳感器的數值模擬出糧堆溫度曲面，然後通過反算得到曲面上各個點的數據，對曲面的點的信息（空間內位置信息，溫度值）進行處理，通過ThingJS接收點的平面位置信息以及溫度信息，以點的平面位置為相應的X、Y坐標，溫度值為相應的Z坐標，配以某種顏色逐點渲染生成糧堆內平面溫度圖。
糧堆內部某一平面溫度如圖5所示，利用滑鼠可以從各個角度觀察儲糧信息。X、Y代表糧堆內某一平面糧食的實際位置，Z代表相應點的溫度值，Z=0即XY面代表一溫度基面，高於XY則該面的糧食溫度過高，相反低於該面，說明糧面溫度處於警戒線以下。
ThingJS平臺內，基於Ajax技術可以完成基本的數據請求，對設備溫度、糧食狀態進行判斷，並明確一個報警界限值，如果超過溫度的警戒線，糧堆曲面的上方將彈出對應的告警標誌，用戶點擊告警標誌，彈出告警信息如事件、原因等，並改變該設備周圍的顏色。代碼如下：
// 如果溫度>25 改變顏色function changeColor(obj) { var temper = obj.getAttribute("monitorData/溫度"); var value = temper.substr(0, temper.indexOf("℃")); if (value > 25) { obj.style.color = 'rgb(255,0,0)'; } else { obj.style.color = null; }}
通過B樣條插值曲面的方法對糧堆內部的溫度分布進行數值模擬，然後利用WGL技術實現溫度監控的三維可視化，因為其具有跨平臺、免插件以及聯網數據交互的特性，比起普通方法更直觀、高效，便於相關人員遠程監控。
鑑於WebGL的特性，人們還可以通過手機、平板等移動終端訪問實時了解糧堆內溫度信息，不過由於直接在GPU端渲染，一般的移動終端限於硬體條件只能訪問簡單的頁面，但是在電子技術日新月異的今天，這些問題一定能夠得到解決。
了解更多 ThingJS Demo