作为一个前端开发工程师，你是不是已经习惯了敲代码，写页面，修BUG，这一点毫无争议，这是工作性质决定的，就像运动员每天都要高强度训练一样。
前端工程师想要攻陷可视化（webgl方向）应用平台开发，讲真的，只要认真钻研，不要三天打鱼两天晒网，做出来不错的可视化应用是必须可以的。
thingjs作为一个物联网可视化3D开发平台， 使用当今最热门的 Javascript 语言进行开发。前端工程师不需要大量写代码，只需要熟练掌握js，通过拖拽和简单写一些代码，极大降低 了3D 界面开发的成本，使项目更快完成，开发人员也能快速提升技术水平。
// 环境光对象
var ambientLight = {
intensity:0.45,
color: '16777215',
};
// 半球光照
var hemisphereLight = {
intensity:0,
color: '16777215',
groundColor: '2236962',
};
// 主灯光对象
var mainLight = {
shadow:true,
intensity:1.5,
color: '16777215',
alpha:29,
beta:30,
};
// 第二光源对象
var secondaryLight = {
shadow:false,
intensity:0,
color: '16777215',
alpha:138,
beta:0,
};
// 全局配置
var config = {
showHelper:false,
ambientLight,
hemisphereLight,
mainLight,
secondaryLight
};
app.lighting = config;
/**
* 说明：展示园区下的 Thing 物体、buildings 和 ground
* 园区下 只有在 CampusBuilder 中编辑了UserID、Name 或自定义属性的物体（摆放的模型），
* 才能在 ThingJS 中创建为 Thing 对象，
* 否则将合并到园区的 ground 中，无法单独进行管理。
* 操作：点击复选框
*/
var app = new THING.App({
// 场景地址
"url": 'https://www.thingjs.com/static/models/storehouse'
});
app.on('load', function (ev) {
var campus = ev.campus;
app.level.change(campus);
var checkbox = createCheckBox();
checkbox[0].on('change', function (ev) {
// 获取园区下的所有建筑，返回为 Selector 结构
var buildings = campus.buildings;
if (ev) {
buildings.style.color = '#ff0000';
}
else {
buildings.style.color = null;
}
});
checkbox[1].on('change', function (ev) {
// 获取园区下的所有 Thing 类物体，返回为 Selector 结构
var things = campus.things;
if (ev) {
things.style.color = '#ff0000';
}
else {
things.style.color = null;
}
})
checkbox[2].on('change', function (ev) {
// 获取园区下的 ground
var ground = campus.ground;
if (ev) {
ground.style.color = '#ff0000';
}
else {
ground.style.color = null;
}
})
})
function createCheckBox() {
// 界面组件
var panel = new THING.widget.Panel({
titleText: '园区级别结构',
hasTitle: true
});
// 创建数据对象
var dataObj = {
checkbox: { '获取 buildings': false, '获取 things': false, '获取 ground': false },
};
// 加载复选框组件
var check = panel.addCheckbox(dataObj, 'checkbox');
return check;
}