ThingJS：利用JS语言，实现3D场景切换

ThingJS平台是基于浏览器开发的3D框架，很多界面都是熟悉的开发元素，JS属于基础的开发语言。例如物联网中如果需要切换不同的场景，一个工厂会有不同的设备管理区域，那在浏览器上如何实现切换呢？

一个复杂的物联网项目都是实景模拟，人居环境会有多个场景组合而成，而且在项目开发过程中，可能建模的人员都不一样，制作的场景都可能在不同的位置，如何做场景切换呢？这个功能官方例程中就写得很清楚，跟我来看看吧！

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

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

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

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

如何进行一个场景的动态切换，有以下三步：
1、首先要有两个以上可以选择切换的场景，在模模搭场景搭建工具中进行建模
2、初始界面默认为第一个加载的场景，嵌入自由进出场景层级的功能
3、加入一个切换按钮，通过点击这个按钮，场景之间可以迅速切换，呈现淡入效果

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

动态切换其实使用的方法很简单，利用按钮事件进行操作，提供淡入淡出效果，3D开发语言你也可以试试JS！