As enterprises pay more and more attention to the visualization of the Internet of Things, more and more companies are making 3D visualization large-screen solutions. And we can give you two solutions, one is a carte Blanche, including the plan of field visits, installation and deployment, technical guidance and maybe more services, and today’s xiaobian is going to talk about another, the Internet of Things visual Pass platform. What is the Pass platform? In short, it’s the thingJS platform that engineers develop on their own. There is no doubt that front-end engineers can do everything by dragging and dropping and writing code.
Scenario building
The ThingJS platform provides users with two ways to build a scene:
Build 3D scene through CamBuilder client
Build 3D scenes through CityBuilder
CamBuilder
The following steps are required to download through the client:
Download the 3D Campus setup tool from ThingJS and click the Download button in the download details panel
After downloading, you can log in your account and click “User Manual” under the tool to view the user tutorial
Export the scene to upload or synchronize it to ThingJS
Select scenarios under park resources for development
For details, see Online Development – Menu Navigation – Resource Management – Park
CityBuilder
In the Maps resource panel, click New Map
Enter the map name in the pop-up screen and click “Next”.
Select either one click city or Upload Data. If you select “Upload data”, a new map resource will be added to the map panel. If you select “one-click City”, you need to select “City Scope” and “Template” and click “Next”. After the data download is complete, click “Enter Edit” to add a map resource in the map panel
Select the map under map resources for development
For details, see Online Development – Menu Navigation – Resource Management – Map
Reference cross-domain page JS
/ * *
* Iframe references cross-domain pages using H5’s postMessage method for function parameter calls to each other
* operation:
* Click on an object in the 3D scene to pass the object name to the page
* Click the button in the page to enter the level of the corresponding object, right click to return to the upper level after entering the level
* Tutorials: ThingJS Tutorials — > Interface — > Iframe reference page
* Difficulty: ★★★★☆
* /
var app = new THING.App({
Url: ‘https://www.thingjs.com/static/models/storehouse’/address/scene
});
app.on(‘load’, function(ev) {
app.level.change(ev.campus);
})
// Interface components
var panel = new THING.widget.Panel();
// Create a data object
var dataObj = {
iframe: ‘https://3dmmd.cn/test/page01/index.html’
};
var iframe = panel.addIframe(dataObj, ‘iframe’).caption(‘iframe’);
iframe.setHeight(‘100px’);
var iframeDom = iframe.domElement.getElementsByTagName(‘iframe’)[0];
// Set the iframe scroll bar
// iframeDom.scrolling = “auto”;
app.on(THING.EventType.SingleClick, function (ev) {
if (ev.picked && ev.object) {
var obj = ev.object;
var name = obj.name;
var message = {
‘funcName’: ‘changeText’, // The name of the function on the iframe page to be called
‘param’: {
‘name’: name
}
}
// Send data to the referenced iframe page
// The first parameter is the data 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
iframeDom.contentWindow.postMessage(message, ‘*’);
}
})
function changeLevel(value) {
var obj = app.query(value)[0];
if (obj) {
app.level.change(obj);
}
}
// Receives data from the iframe page
window.addEventListener(‘message’, function (e) {
var data = e.data;
var funcName = data.funcName;
var param = data.param;
window[funcName](param.name);
})