Visual application has actually penetrated into all walks of life, including IT operation and maintenance, smart campus, smart storage, smart city, smart electricity, fire prevention plan, smart building and so on. As a development engineer, do you think IT is very popular? Ha ha, people with skills are hot property wherever they go, this is true. The ThingJS platform is already fast and easy to develop. If you are familiar with WebGL and JS, and have some experience in front-end development, you can build your own visual scenes on ThingJS and use data to develop applications. It is not difficult to develop 3D visual applications in webGL direction.
User pages are embedded with 3D.js
/ * *
* note:
* Examples are used to demonstrate the ThingJS project after its release
* Application scenarios embedded as iframes in user system pages
* Because of the cross-domain relationship between the ThingJS online environment and the user’s system page
* Therefore, the postMessage interface provided by HTML5 is used for data communication between iframe pages
* The following code contains only the 3D part
* See tutorial — > Project Publishing — > [Advanced] referencing 3D pages for the code in the user page section
* Complete sample code please click
* http://www.thingjs.com/static/iframe/index.html
* Code excerpt below
*…
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,// The name of the function to be called in the ThingJS page
‘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);
}
// Receive data from the ThingJS page
window.addEventListener(‘message’, function (e) {
var data = e.data;
var funcName = data.funcName;
var param = data.param;
if (window[funcName]) window[funcName](param);
});
*
*
* Difficulty: ★★★★☆
* /
var app = new THING.App({
Url: ‘https://www.thingjs.com/static/models/storehouse’/address/scene
});
app.on(‘load’, function (ev) {
var campus = ev.campus;
// Enable the system level
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 = “enter” + type + (” + name + “)”;
// Call the upDateInfo method on the user’s home page
callFuncInMain(‘upDataInfo’, { info, id });
})
function callFuncInMain(funcName, data) {
var message = {
‘funcName’: funcName, // The function name in the parent page to be called
‘param’: data
}
// Sends a message to the parent form (the user home page)
// The first argument is the specific information content,
// The second argument is the origin of the window that received the message. You can also set this parameter to *, which indicates that the domain name is not limited and the message is sent to all Windows
window.parent.postMessage(message, ‘*’);
}
function changeLevel(id) {
var obj = app.query(‘#’ + id)[0];
if (obj) {
app.level.change(obj);
}
}
// Listen for the data returned from the user page and call the ThingJS page method
window.addEventListener(‘message’, function (e) {
var data = e.data;
var funcName = data.funcName;
var param = data.param;
// Call the ThingJS page method
window[funcName](param);
});
Do you know how to develop 3D visualization application in WebGL direction? As a front end engineer, creating a visual application through Things is the beginning of your technical improvement. If you are interested, you can try it out