ThingJS demo展现：3D场景轻松切换

 

ThingJS 3D开发框架不只易学并且很适合屏幕展现，具备广阔的物联网发展前景。

 

使用ThingJS官方神奇模模搭来搭建场景，这个相信你们都很熟悉，它的场景可以自动同步到ThingJS网站中去，毕竟是一家亲，若是ThingJS在线平台找不到，那不是平台的问题，而是你的操做问题！记得回到模模搭客户端查看是否同步彻底，或者是上传的obj模型由于标准或者规范的问题而被拒绝的，就可能致使场景没法正常同步，只要查看标准文档进行操做就能够啦！

物联网可视化项目主要涉及大型而复杂的园区、地理地形或者工程等，越复杂就越须要合理规划，ThingJS是如何简化这些开发流程的呢？咱们是有神器助攻的！ThingJS通过多年开发经验的沉淀，得出了四个开发步骤：场景搭建、在线开发、数据对接、项目部署，同时把建模和开发分开，设计人员使用CampusBuilder（又称模模搭）或者cityBuilder搭建工具，无代码轻松拖拽元素便可制做模型，随后开发人员使用ThingJS在线开发，从官方示例了解最新的酷炫功能，基于JS代码轻松开发，不须要额外培训！

模模搭能够选择对应的模型搭建一个工厂或者是粮仓，可是特殊模型也有，能够从其余位置加载并上传使用，ThingJS推荐使用3DMAX工具搭建特殊模型，并提供3DMAX上传插件来完成传输，这些插件资源均可以在官网-资源中心下载。

在线开发的时候如何引用任何场景的URL？使用快捷键Ctrl+J或者直接点击园区icon打开园区界面，双击对应场景便可出现该场景的URL，引用完毕以后，参考以下官方示例进行不一样的场景切换，一切清楚明白无保留！

如何在ThingJS开发平台进行一个场景的动态切换，有如下三步：

一、首先要有两个以上能够选择切换的场景，在模模搭场景搭建工具中进行建模

二、初始界面默认为第一个加载的场景，嵌入自由进出场景层级的功能

三、加入一个切换按钮，经过点击这个按钮，场景之间能够迅速切换，呈现淡入效果

由于物联网数字化转型，对于3D可视化的需求是空前的，为了知足这一需求，小步快步屡次迭代是最好的策略，这里就少不了一款低成本又易用的工具支持。

代码示例以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

/**  * 说明：经过动态建立场景，实现场景切换  */   // 场景地址 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);         }     }); }