3D可视化应用开发 WebGL 方向怎么实现?

·  阅读 148

可视化应用已经实际渗透到各行各业中,包括IT运维、智慧校园、智慧仓储、智慧城市、智慧电力、消防预案、智能建筑等等,作为开发工程师的你是不是觉得很抢手呢,哈哈,有技术的人走到哪里都是香饽饽,这个一点不假。不过你还需要再历练,因为thingjs平台已经实现低门槛快速开发啦!只要了解webgl,熟悉js,有一定的前端开发经验就可以在thingjs平台自己动手搭建可视化场景,对接数据开发应用啦~WebGL方向开发3D可视化应用真心不难,用心总能做到!


thingjs-面向物联网的3D可视化开发平台

用户页面嵌3D.js

/**

* 说明:

* 示例用于演示 ThingJS 项目发布后

* 以 iframe 的方式嵌入到用户系统页面中的应用场景

* 由于ThingJS在线环境与用户系统页面是跨域关系

* 因此需使用 HTML5 提供的 postMessage 接口进行与iframe页面间的数据通信

* 以下代码仅包含3D部分

* 用户页面部分的代码 请参见教程——>项目发布——>【进阶】引用3D页面

* 完整示例代码 请点击

* http://www.thingjs.com/static/iframe/index.html

* 代码摘录如下

* ...

window.onload = function () {

createTree();

}


function createTree() {

$.ajax({

type: "get",

url: "./data/tree.json",

dataType: "json",

success: function (d) {

$('#objectTree').tree({

data: d,

onClick: function (node, checked) {

var id = node.id;

callFuncInThingJS('changeLevel', id)

}

})

}

});

}


function callFuncInThingJS(funcName, data) {

var iframe = $('#myIframe')[0];


var message = {

'funcName': funcName,// 所要调用ThingJS页面里的函数名

'param': data

}

iframe.contentWindow.postMessage(message, '*');

}


function upDataInfo(param) {

var infoText = $('#infoText')[0];

infoText.innerText = param.info;


var node = $('#objectTree').tree('find', param.id);

$('#objectTree').tree('expandTo', node.target).tree('select', node.target);

}


// 接收ThingJS页面传送的数据

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

var data = e.data;

var funcName = data.funcName;

var param = data.param;

if (window[funcName]) window[funcName](param);

});

*

*

* 难度:★★★★☆

*/

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做一个可视化应用出来可是你技术提升的开端呀~感兴趣的同学可以试一试~


分类:
开发工具
标签: