三维可视化炫酷运维场景很多同学一定都见过,它已经存在在我们身边很久了。最常见的就是大屏,商场大屏或者户外大屏最为常见。但三维可视化场景不仅仅只有展示的功能,数图联动才是主要功能。那你知道高端大气三维可视化场景是怎么制作的吗?
这主要依靠物联网可视化pass平台,ThingJS 基于 HTML5 和 WebGL 技术,只需要具有基本的 Javascript 开发经验即可上手。可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备。ThingJS 为可视化应用提供了简单、丰富的功能,ThingJS 提供了场景加载、分层级浏览,对象访问、搜索、以及对象的多种控制方式和丰富的效果展示,可以通过绑定事件进行各种交互操作,还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等各种可视化功能。
/**
* 说明:拖拽物体
* 操作:
* 开启拖拽后,鼠标左键拖拽物体
* 关闭拖拽后,物体不可拖拽
* 难度:★★☆☆☆
*/
var app = new THING.App({
});
app.on('load', function () {
// 获取所有 Thing 物体
var objs = app.query('.Thing');
new THING.widget.Button('开启拖拽', function () {
// 设置物体可拖拽(默认物体不可拖拽)
objs.draggable = true;
// 设置勾边颜色
objs.style.outlineColor = '#ff0000';
});
new THING.widget.Button('关闭拖拽', function () {
objs.draggable = false;
objs.style.outlineColor = null;
})
// 监听拖拽相关事件
// 开始拖拽
objs.on('dragstart', function (ev) {
console.log('开始拖拽')
var obj = ev.object;
obj.style.color = '#ff0000';
});
// 拖拽中
objs.on('drag', function (ev) {
if (ev.picked) {
console.log(ev.pickedPosition);
}
});
// 结束拖拽
objs.on('dragend', function (ev) {
console.log('结束拖拽')
var obj = ev.object;
obj.style.color = null;
});
})
举报/反馈