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,让物联网开发更简单!
原文地址:https://www.cnblogs.com/thingjs/p/12937037.html