太难了，前端搞可视化开发终于看到希望
太难了，前端工程师大吐苦水，公司要搞物联网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你就能飞起来啦~纯免费可以来试！