不吹不黑,前端搞可视化开发终于看到希望

417 阅读2分钟

  太难了,前端工程师大吐苦水,公司要搞物联网3D可视化应用,虽然有一些前端开发的经验,但还是一脸懵,怎么搞,去哪里搞?对物联网3D可视化一知半解。en,何不好好研究一下thingjs,什么是thingjs?


  ThingJS 使用当今最热门的 Javascript语言进行开发。不仅可以针对单栋或多栋建筑组成的园区场景进行可视化开发,搭载丰富插件后,也可以针对地图级别场景进行开发。广泛应用于数据中心、仓储、学校、医院、安防、预案等多种领域。

  基于 HTML5 和 WebGL 技术,可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备。ThingJS为可视化应用提供了简单、丰富的功能,只需要具有基本的 Javascript开发经验即可上手。

  ThingJS提供了场景加载、分层级浏览,对象访问、搜索、以及对象的多种控制方式和丰富的效果展示,可以通过绑定事件进行各种交互操作,还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等各种可视化功能。ThingJS提供多种组件和工具供用户使用。

  直接贴代码合适吗?不管了...

/**

* 说明:物体渐隐渐现

* 操作:点击按钮

* 教程:ThingJS教程——>控制对象——>效果

* 难度:★☆☆☆☆

*/

var app = new THING.App({

url: 'https://www.thingjs.com/static/models/storehouse'

});

// 加载场景后执行

app.on('load', function (ev) {

var car = app.query('car01')[0];

app.camera.fit(car);

new THING.widget.Button('渐隐', function () {

car.fadeOut({

time: 1000, // 时间 毫秒

// 渐隐完成后的回调函数

complete: function (ev) {

console.log(ev.object.visible);

}

});

});

new THING.widget.Button('渐现', function () {

car.fadeIn({

time: 1000,

complete: function (ev) {

console.log(ev.object.visible);

}

});

})

});

/**

* 说明:直接使用图片贴图

* 操作:点击按钮

* 难度:★★☆☆☆

*/

var app = new THING.App({

url: 'https://www.thingjs.com/static/models/storehouse'

});

app.on('load', function () {

// 设置摄像机位置和目标点

app.camera.position = [24.642510549459775, 4.302692201327658, 16.259715252398298];

app.camera.target = [16.850313962013193, 0.15861977649910672, 4.364786416484356];

new THING.widget.Button('创建 Box', function () {

var box = app.query('#myBox01')[0];

if (box) return;

box = app.create({

type: 'Box',

id: 'myBox01',

width: 2.0, // 宽度

height: 2.0, // 高度

depth: 2.0, // 深度

center: 'Bottom', // 中心点

position: [18, 0, 8],

style: {

image: 'images/uv.jpg',

color: '#ffffff',

}

});

})

new THING.widget.Button('换 Box 贴图', 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('创建 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'

}

});

})

})

前端工程师搞可视化方向开发真心不难,熟悉webgl,掌握js,通过thingjs你就能飞起来啦~纯免费可以来试!