html5三维可视化,高端大气三维可视化应用前端就能开发？

三维可视化炫酷运维场景很多同学一定都见过，它已经存在在我们身边很久了。最常见的就是大屏，商场大屏或者户外大屏最为常见。但三维可视化场景不仅仅只有展示的功能，数图联动才是主要功能。那你知道高端大气三维可视化场景是怎么制作的吗？

这主要依靠物联网可视化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;

});

})

举报/反馈