|
如何控制楼层的层级效果？比如进入楼层展开楼层？三维可视化园区中该怎么去访问对象？又是如何让场景显示和隐藏的呢？在ThingJS物联网可视化开发平台中，ThingJS提供了控制场景的方法，让我们来看看它是如何控制的吧！
ThingJS官方示例中按分类访问对象，使用全局APP对象，通过forEach函数遍历园区中所有对象，并且打印出对象的id属性。 /** * 说明：通过 “分类对象属性树” 访问场景内的对象 * 操作：无，查看log信息 * 教程：ThingJS 教程——>园区与层级——>场景层级 * 难度：★★☆☆☆ */ var app = new THING.App({ }); // 加载场景后执行 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({ }); // 加载场景后执行 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], 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({ 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({ }); // 加载场景后执行 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，反而是一个更好的选择。 | 
2402
0
