ThingJS，轻松切换3D场景！

使用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，让物联网开发更简单！