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，讓物聯網開發更簡單！