使用thingjs场景切换功能
在使用thingjs快速开发物联网项目时,有时候一个项目中可能不止一个场景,有时候有两个甚至更多的场景,并且制作的场景也可能不在同一个位置,那么我们该如何去切换场景呢?别担心,thingjs中就有官方示例,告诉我们如何切换场景!
在切换场景之前,我们需要先在thingjs中制作好初始场景和要切换的场景,这里就以官方示例中的两个场景为例,使用thingjs园区搭建工具模模搭制作好的场景,将会自动同步到thingjs网站中去,如果thingjs网站中没有,那么我们得看看是不是场景还没有从我们的campusbuiler客户端中同步完全,或者其中有上传的obj模型不符合标准的,就有可能导致场景无法正常同步thingjs网站中。
我们都知道物联网可视化项目不是很好做,在thingjs中提供了简化园区搭建的工具,thingjs是如何简化的呢?thingjs将园区搭建和园区场景开发分为了两个部分,一个是thingjs的campusbuiler(模模搭)园区搭建工具,还有一个是thingjs在线开发平台,用户可以在campusbuiler中选择对应的模型来搭建一个工厂或是仓库或是粮仓,如有特殊模型也可在其他位置下载模型然后上传到campusbuiler中,thingjs中推荐使用3dmax搭建特殊模型,然后通过3dmax上传插件将模型上传到campusbuiler中,再通过campusbuiler来搭建园区场景,场景搭建完成后即可在thingjs在线开发平台中开发。
在thingjs中引用该场景的URL,使用快捷键Ctrl + J 或者直接点击园区按钮来打开园区,双击对应场景即可出现该场景的URL,仿照thingjs中的官方示例,即可在thingjs中切换不同的场景啦~
相关代码如下:
/** * 说明:通过动态创建场景,实现场景切换 */ // 场景地址 var campusUrl = [ 'https://www.thingjs.com/static/models/storehouse', 'https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%9B%BE%E4%B9%A6%E9%A6%86%E5%A4%96' ] // 存储创建完成的园区 var curCampus; var app = new THING.App({ url: campusUrl[0] }); app.on('load', function (ev) { curCampus = ev.campus; app.level.change(curCampus); new THING.widget.Button('场景切换', function () { var url = curCampus.url; // 动态创建园区 if (url === campusUrl[0]) { createCampus(campusUrl[1]); } else { createCampus(campusUrl[0]); } }); }); function createCampus(url) { app.create({ type: "Campus", url: url, position: [0, 0, 0], visible: false, // 创建园区过程中隐藏园区 complete: function (ev) { // 新园区创建完成后删除之前的 curCampus.destroy(); // 将新园区赋给全局变量 curCampus = ev.object; // 创建完成后显示(渐现) curCampus.fadeIn(); app.level.change(curCampus); } }); }
thingjs作为物联网可视化方面的平台,拥有3D园区搭建工具campusbuiler、3D图表搭建工具ChartBuilder、3D城市搭建工具citybuilder,同时thingjs化提供建模服务、官方交流群等,即使在开发中遇到困难,也能向官方寻求帮助!thingjs,让物联网开发更简单!