三維可視化# #3D開發

1. WebGL 3D技術
2. 新一代3D框架-ThingJS
3. 3D可視化告警系統案例
4. 基於ThingJS的通用架構設計

WebGL 3D技術

WebGL是一種在網頁瀏覽器中渲染3D圖形的 JavaScript API，無需加裝插件，只需編寫網頁代碼即可實現3D圖形的展示。WebGL技術相較於傳統的Web3D技術有兩大優點：第一，通過JavaScript腳本語言實現網絡交互式三維動畫製作，無需依賴任何瀏覽器插件；第二，WebGL基於底層的 OpenGL接口實現，具有底層圖形硬件(GPU)加速功能。

WebGL繪製3D模型的過程分為四個步驟如下：

第一，獲取頂點座標。頂點座標通常來自三維軟件導出，在獲取到頂點座標後，存儲到顯存以便GPU更快讀取；第二，圖元裝配，畫出一個個三角形。圖元裝配就是由頂點生成一個個圖元(即三角形)，這個過程是由頂點著色器完成的。頂點著色器會先將頂點座標通過矩陣變換為屏幕座標，然後由GPU進行圖元裝配；第三，進行光柵化，即生成片元 (一個個像素點)。第四，在圖元生成完畢之後，還需要給模型“上色”，由運行在GPU的“片元著色器”來完成。

新一代3D框架

如果直接使用 WebGL開發3D效率比較低，需要開發者對圖形學知識有很深入的瞭解，碎片化的概念並不易於開發。為了解決開發效率低的問題，出現了基於 JavaScript語言的第三方庫-three.js，這是開源的技術，受到了廣大前端轉3D開發師的追捧。

three.js是一個跨瀏覽器的腳本，它封裝了底層的圖形接口，對 WebGL有很好的支持，不需要掌握複雜的圖形學知識就能實現三維場景的渲染。如渲染黑色背景下的白色正方體和三角形, WebGL需要編程代碼大約150行，而 threejs編程只需要30行左右的代碼，工作量只有 WebGL的五分之一，大幅提高了開發效率。

相較而言，近兩年新興的3D框架-ThingJS，封裝了幾乎所有的3D概念，開發人員甚至不需要3D專業知識儲備，直接使用JavaScript調用3D源碼，輕鬆實現3D效果，順利完成二次開發。如加載3D場景，three.js需要100行左右的代碼，ThingJS僅需1行，直接JavaScript腳本調用3D場景URL。

3D可視化告警系統案例

3D可視化告警系統常見於城市交通指揮、地鐵通信、智能家居、消防安全領域，工業自動化設備運維管理過程中，常遇到故障設備定位困難、監控數據不形象不直觀等問題，基於 WebGL技術的3D框架開發，本案例實現了一個通用的3D可視化告警系統設計方案，不僅擺脫了傳統3D可視化方案依賴插件的束縛，解決了出錯率高、數據難以沉澱等問題。

從用戶角度出發，採用 WebGL技術在瀏覽器端對工業生產設備進行虛擬化仿真模擬，並基於綜合監控管理平臺採集到的設備運行數據進行車間設備運行情況的形象立體化展示，3D場景動效給管理者以良好的沉浸感和交互感，擺脫表格、文本等比較傳統的管理方式。

某港口的數字告警監控可視化應用界面

基於ThingJS的通用架構設計

一個通用的告警系統，分為數據存儲層、數據處理層和數據展示層。

數據存儲層主要使用 mysql數據庫存儲設備、數據基本信息和採集到的告警信息，使用json文件存儲3D模型數據信息；數據處理層主要結合Ajax數據對接方式在線判斷告警信息，利用JavaScript腳本對數據進行處理分析以及業務邏輯的實現；數據展示層主要使用基於 WebGL的 ThingJS平臺組件完成對3D場景的加載渲染，並提供在線項目分享功能，用戶可以生成唯一URL和二維碼，在其他web系統嵌入iframe鏈接進行演示。【官網註冊鏈接】

01 基礎功能構建

基礎操作含3大功能模塊：設備管理模塊、3D場景漫遊模塊以及設備健康狀態管理。

(1) 設備管理。

用戶可以查看設備基本信息，通過拖拽的形式改變設備在場景中的位置，實現設備的縮放和旋轉操作，還可以根據自己的需要添加和刪除設備。ThingJS的開發師調用js腳本，控制物體的位置、旋轉、縮放，包括Z軸方向移動。【查看完整示例】

// 位置
app.on('click', function(event) {
    if (event.picked)
        car.position = event.pickedPosition;
});
// 移動，z軸方向
function obj_translate() {
    car.translate([0, 0, -1]);
}
// 旋轉，y軸方向
function obj_rotate() {
    car.rotateY(45.0);
}
// 縮放
function obj_scale() {
    car.scale = [1, 2, 1];
}

(2) 3D場景自由漫遊。

用戶通過鼠標完成對整個3D場景的移動，縮放和旋轉操作，從而滿足用戶360度查看場景的需要，給用戶帶來良好的交互感和浸入感。ThingJS示例採用js腳本讓攝像機自動環繞某看點位置（世界座標系下）或某物體旋轉。【3D演示】
某能源儲能電站告警系統可視化應用

(3) 設備健康狀態管理。

用戶可自由查看機房內任意設備的健康度，健康度分為三個區間，分別用紅黃綠三種顏色來表示設備的健康狀態。當系統檢測到設備出現告警信息時，在該設備的上方彈出對應的告警標誌，用戶點擊告警標誌，彈出告警詳情，包括告警時間、告警類別、告警原因等。ThingJS平臺內，基於Ajax技術可以完成基本的數據請求，對設備溫度、健康狀態進行判斷，並設定一個報警界限值。【查看完整示例】

function updateData(obj) {
    // 如果網站是 https 接口則對應 https 請求
    // 如果網站是 http 接口則對應 http 請求即可
    $.ajax({
        type: "get",
        url: "https://3dmmd.cn/getMonitorDataById",
        data: { "id": obj.id },
        dataType: "json", // 返回的數據類型 json
        success: function (d) {
            console.log(d);
            var temper = d.data.temper;
            // 設置物體身上的監控數據
            obj.setAttribute("monitorData/溫度", temper);
            changeColor(obj);
            // 每隔3s 請求一次數據
            timer = setTimeout(function () {
                updateData(obj)
            }, 3000);
        }
    });
}
// 停止請求數據
function stopUpdate() {
    clearTimeout(timer);
}
// 如果溫度>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;
    }
}

02 自動巡航功能

不僅僅是自動駕駛系統，工業設備可視化也可以加入自動巡航功能，以勻速的狀態移動前進。

用戶可以根據廠房環境和設備佈局情況，設定巡航路徑，當用戶點擊自動巡航按鈕時，可以沿著設定好的路徑進行巡視，無需用戶手動操作，就能夠對路徑上的設備健康情況進行全局瞭解，大大減少了用戶的工作量，提高了工作效率。

ThingJS利用js腳本中的攝像機概念來確定觀察3D場景的視角，讓攝像機一直跟隨物體，達到設定巡航路線的目的。【查看完整示例】

new THING.widget.Button('攝像機跟隨物體', function () {
        // 每一幀設置攝像機位置 和 目標點
        car.on('update', function () {
            // 攝像機位置為 移動小車後上方
            // 為了便於計算 這裡用了座標轉換 將相對於小車的位置 轉換為 世界座標
            app.camera.position = car.selfToWorld([0, 5, -10]);
            // 攝像機目標點為 移動小車的座標
 app.camera.target = car.position
        }, '自定義攝影機跟隨');
    });


    new THING.widget.Button('停止', function () {
 car.off('update', null, '自定義攝影機跟隨');
    });
});

ThingJS項目主要採用B/S架構，基於WebGL技術並採用更高效的3D封裝庫實現，用戶直接在瀏覽器上通過url地址訪問項目，不需要安裝任何插件。

ThingJS平臺的在線開發方案在瀏覽器端對自動化設備以及各個監控系統採集到的設備運行數據進行三維仿真模擬，不僅使得3D數據的展示更加形象、立體，達到了輔助運維的目的；同時一次在線開發，可以在多種終端設備、多種屏幕尺寸的系統上運行，隨時隨地查看監控畫面，大大降低了運營成本，減少了3D可視化項目的實施時間和成本。