作为一个有三年前端开发的经验人来说,使用threejs开发可视化应用真心难倒了我。Threejs库的出现解决了底层的渲染细节和复杂的数据结构,终于将复杂的底层细节抽象出来,使得大家开发3d应用更容易了一些。和很多开发者交流threejs都是他们首次接触的WebGL 3D库,并能很容易的就能开始做一些实验。
但是使用Threejs开发应用还是门槛很高,但就一个加载模型,调光,选择模型弹框的功能,就能干出Threejs上百行代码。同时还有很多复杂的3D概念需要理解。
这时就需要ThingJS了。ThingJS是更为上层的抽象,不用关心,渲染,mesh,光线等复杂概念。它抽象是一个个具体的模型,ThingJS封装了对模型交互事件的各种api,比如单击,左键,鼠标滑过等,ThingJS封装了对模型的操作,例如移动,放大缩小,上色,勾边,甚至开门,ThingJS还封装了模型的层次关系,例如物体是放在某个房间里的,房间又在某个楼层,楼层又是某个大楼的,大楼在园区里。这样讲是不是更直观呢?所以既然有难度不如使用封装threejs库的thingjs吧。
园区结构.js
/**
* 说明:展示园区下的 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;
}