The company wants to develop 3D visualization applications for the Internet of Things. Although it has some experience in front-end development, it is still confused. How and where to do it? I have little knowledge of the 3D visualization of the Internet of Things. En, why don’t you study Thingjs? What is Thingjs?
ThingJS is developed using the most popular Javascript language today. It can not only carry out visual development for park scenes composed of single or multiple buildings, but also carry out development for map-level scenes with rich plug-ins. Widely used in data centers, warehousing, schools, hospitals, security, planning and other fields.
Based on HTML5 and WebGL technology, it can be easily browsed and debugged in mainstream browsers, supporting PC and mobile devices. ThingJS offers simple, rich functionality for visual applications that require basic Javascript development experience.
ThingJS provides scene loading level, layering, browse, access, search, and object is rich in a variety of control mode and the effect of the show, can undertake all kinds of interactions through binding event, also provides the camera Angle, temperature and humidity control, the effect of point, line and plane, cloud interface data display, particle effects, etc. Various kinds of visual function. ThingJS offers a variety of components and tools that users can use.
Is it ok to post code directly? No matter…
/ * *
* Description: Objects fade and appear
* Action: Click the button
* Tutorials: ThingJS Tutorials — > Control Objects — > Effects
* Difficulty: ★☆☆☆
* /
var app = new THING.App({
url: ‘https://www.thingjs.com/static/models/storehouse’
});
// Execute after loading the scenario
app.on(‘load’, function (ev) {
var car = app.query(‘car01’)[0];
app.camera.fit(car);
Button(‘ fade ‘, function () {new thing.widget. Button(‘ fade ‘, function () {
car.fadeOut({
Time: 1000, // time milliseconds
// Fade the callback function after completion
complete: function (ev) {
console.log(ev.object.visible);
}
});
});
New thing.widget. Button(‘ fade ‘, function () {function () {
car.fadeIn({
time: 1000,
complete: function (ev) {
console.log(ev.object.visible);
}
});
})
});
/ * *
* Instructions: Use picture maps directly
* Action: Click the button
* Difficulty: ★★☆☆
* /
var app = new THING.App({
url: ‘https://www.thingjs.com/static/models/storehouse’
});
app.on(‘load’, function () {
// Set the camera position and target point
App.camera. Position = [24.642510549459775, 4.302692201327658, 16.259715252398298];
App.camera. Target = [16.850313962013193, 0.15861977649910672, 4.364786416484356];
New thing.widget. Button(‘ create Box’, function () {
var box = app.query(‘#myBox01’)[0];
if (box) return;
box = app.create({
type: ‘Box’,
id: ‘myBox01’,
Width: 2.0, // width
Height: 2.0, // height
Depth: 2.0, // Depth
Center: ‘Bottom’, // The center point
position: [18, 0, 8],
style: {
image: ‘images/uv.jpg’,
color: ‘#ffffff’,
}
});
})
Function () {new thing.widget. Button(‘ Box map ‘, function () {
var imgUrl = ‘https://www.thingjs.com/static/images/avatar.png’;
var box = app.query(‘#myBox01’)[0];
if (box) {
box.style.image = imgUrl;
}
})
New thing.widget. Button(‘ create Plane’, function () {
var plane = app.query(‘#myPlane01’)[0];
if (plane) return;
var imgUrl = ‘https://www.thingjs.com/static/images/monitorPanel3.png’;
var imgWidth = 512;
var imgHeight = 329;
var car = app.query(‘car01’)[0];
plane = app.create({
type: ‘Plane’,
id: ‘myPlane01’,
Width: imgWidth * 0.004,
Height: imgHeight * 0.004,
parent: car,
localPosition: [0, 3, 0],
style: {
image: imgUrl,
Opacity: 0.99,
color: ‘#ffffff’
}
});
})
})
It’s really easy for a front-end engineer to do visual development. If you’re familiar with WebGL and JS, you can fly with ThingJS.