如何控制楼层的层级效果？比如进入楼层展开楼层？三维可视化园区中该怎么去访问对象？又是如何让场景显示和隐藏的呢？在ThingJS物联网可视化PaaS平台中，ThingJS提供了控制场景的方法，让我们来看看它是如何控制的吧！

ThingJS官方示例中按分类访问对象，使用全局APP对象，通过forEach函数遍历园区中所有对象，并且打印出对象的id属性。

/**
* 说明：通过 “分类对象属性树” 访问场景内的对象
* 操作：无，查看log信息
* 教程：ThingJS 教程——>园区与层级——>场景层级
* 难度：★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});// 加载场景后执行
app.on('load', function (ev) {
// 获取园区对象
var campus = ev.campus;// 打印园区内的 Thing 物体
campus.things.forEach(function (thing) {
console.log('Thing: ' + thing.id);
});// 获取园区下的建筑对象
var buildings = campus.buildings;
buildings.forEach(function (building) {
console.log('Building: ' + building.id);
});// 打印第一个建筑中所有的楼层
buildings[0].floors.forEach(function (floor) {
console.log('Floor: ' + floor.id);
});});

/**
* 说明：通过 “父子树” 访问场景内的对象
* 操作：无，查看log信息
* 教程：ThingJS 教程——>园区与层级——>场景层级
* 难度：★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});// 加载场景后执行
app.on('load', function (ev) {
// 获取园区对象
var campus = ev.campus;// 通过场景的 父子树 访问对象
var children = campus.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
var id = child.id;
var name = child.name;
var type = child.type;console.log('id: ' + id + ' name: ' + name + ' type: ' + type);
}// id 107 为白色厂区建筑，
// parent: app.query('107')[0] 为在厂区内创建物体
// 厂区内创建的物体，只有在进入厂区后才会能显示，点击厂区进入，则看到绿色小车
// 当推出厂区后，绿色小车则隐藏
var obj = app.create({
type: 'Thing',
id: 'No1234567',
name: 'truck',
parent: app.query('107')[0],
url: 'https://model.3dmomoda.com/models/8CF6171F7EE046968B16E10181E8D941/0/gltf/', // 模型地址
position: [0, 0, 0], // 世界坐标系下的位置
complete: function (ev) {
//物体创建成功以后执行函数
console.log('thing created: ' + ev.object.id);
}
});var campus = ev.campus;
console.log('after load ' + campus.id);
// 切换层级到园区
app.level.change(campus);
});

ThingJS通过THING.widget.Button方法来创建按钮，通过query方法来查询，括号内可以是id也可以是name。具体如何使用可以查看API。

/**
* 说明：演示场景层级切换的相关API
* 操作：
* 园区加载完成 将层级设置为园区后 开启了系统的层级控制
* 点击「进入楼层」「进入书柜」跳转到相应层级
* 点击「返回上一级」返回到上一层级
* 教程：ThingJS教程——>园区与层级——>如何切换层级
* 难度：★★☆☆☆
*/
var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse',skyBox: 'Night'
});app.on('load', function (ev) {// 场景加载完成后 进入园区层级 开启默认的层级控制app.level.change(ev.campus);new THING.widget.Button('进入楼层', function () {// 通过name查询得到楼层var obj = app.query('108')[0];// 将层级切换到楼层app.level.change(obj);});new THING.widget.Button('进入书柜', function () {// 通过name查询得到书柜var obj = app.query('cabinetB4')[0];// 将层级切换到书柜app.level.change(obj);});new THING.widget.Button('返回上一级', function () {// 返回上一层级app.level.back();});
});

在ThingJS中，使用building.floors.visible方法控制楼层是否可见，使用isHorzMode、isHideRoof 属性来控制水平或者垂直展开。

/**
* 说明：楼层展开和恢复功能
* 操作：点击按钮和选择框
*/
var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse'
});// 加载场景后执行
var building = null;
app.on('load', function (ev) {building = ev.buildings[0];new THING.widget.Button('楼层展开', test_expand);new THING.widget.Button('楼层合并', test_unexpand);
});// 水平展开或垂直展开(可尝试修改后运行看效果)
var isHorzMode = false;
// 展开楼层时是否隐藏天花板
var isHideRoof = true;// 展开建筑楼层
function test_expand() {// 在园区层级下 建筑内的楼层默认是隐藏的// 因此 在园区层级下 展开楼层需设置该建筑下的楼层可见building.floors.visible = true;// 隐藏建筑的外立面building.facades.visible = false;building.expandFloors({'time': 1000,'distance': isHorzMode ? -30 : 10,'horzMode': isHorzMode,'hideRoof': isHideRoof,'complete': function () {console.log('expand complete ');}});
}// 恢复建筑楼层
function test_unexpand() {building.unexpandFloors({'time': 500,'complete': function () {building.floors.visible = false;building.facades.visible = true;console.log('unexpand complete ');}});
}

看到这写代码是不是觉得很简单？很多人都会拿threejs来横向对比ThingJS，夸奖threejs不但免费而且功能强大，但是实际上呢？两者的面向群众是不尽相同的铲子和挖掘机都能挖地，那是不是就不要铲子了呢？这个比喻虽然不恰当，但也说明了这一点，threejs免费、开源，全球都有许多人使用，人群广，技术更是层层推进，制作一个简单的方盒子都需要近百行代码，因为它“要求更高”！threejs更适合那些3D爱好者和民间大神去使用，而ThingJS的定位就是，给前端工程师看看，一周内就能上手开发项目的，ThingJS更偏向于项目的制作与交付，说白了，一个是理想主义者(threejs)，而一个是现实主义者(thingjs)，追求更精密的操作，更加高大上的效果，建议使用threejs或者是其他免费开源的软件，而要是进行项目一级的制作，需要进行交付等等，那么使用ThingJS，反而是一个更好的选择。