3D可視化應用開發 WebGL 方向怎麼實作？

可視化應用已經實際滲透到各行各業中，包括IT運維、智慧校園、智慧倉儲、智慧城市、智慧電力、消防預案、智能建築等等，作為開發工程師的你是不是覺得很搶手呢，哈哈，有技術的人走到哪裡都是香饽饽，這個一點不假。不過你還需要再曆練，因為thingjs平台已經實作低門檻快速開發啦！隻要了解webgl，熟悉js，有一定的前端開發經驗就可以在thingjs平台自己動手搭建可視化場景，對接資料開發應用啦~WEBGL方向開發3D可視化應用真心不難，用心總能做到！

thingjs-面向物聯網的3D可視化開發平台

使用者頁面嵌3D.js

var app = new THING.App({

    url: 'https://www.thingjs.com/static/models/storehouse'    // 場景位址

});

app.on('load', function (ev) {

    var campus = ev.campus;

    // 開啟系統層級

    app.level.change(campus);

});

app.on(THING.EventType.LevelChange, function (ev) {

    var obj = ev.object;

    var name = obj.name;

    var type = obj.type;

    var id = obj.id;

    var info = "進入 " + type + " (" + name + ")";

    // 調用 使用者首頁面的 upDateInfo 方法

    callFuncInMain('upDataInfo', { info, id });

})

function callFuncInMain(funcName, data) {

    var message = {

        'funcName': funcName, // 所要調用父頁面裡的函數名

        'param': data

    }

    // 向父窗體(使用者首頁面)發送消息

    // 第一個參數是具體的資訊内容，

    // 第二個參數是接收消息的視窗的源（origin），即"協定 + 域名 + 端口"。也可以設為*，表示不限制域名，向所有視窗發送

    window.parent.postMessage(message, '*');

}

function changeLevel(id) {

    var obj = app.query('#' + id)[0];

    if (obj) {

        app.level.change(obj);

    }

}

// 監聽使用者頁面傳回的資料 并調用 ThingJS 頁面方法

window.addEventListener('message', function (e) {

    var data = e.data;

    var funcName = data.funcName;

    var param = data.param;

    // 調用 ThingJS 頁面方法

    window[funcName](param);

});

WebGL方向開發3D可視化應用怎麼實作你了解了嗎？作為前端工程師通過things做一個可視化應用出來可是你技術提升的開端呀~感興趣的同學可以試一試~