• 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,让物联网开发更简单!
  • 相关阅读:
    #include <sys/stat.h>的作用
    如何使用SecureCRT连接vmware下ubuntu
    64位CentOS安装32位开发环境编译Nachos
    Apache安装完服务没有安装的情况
    Java实现八皇后
    动态规划初级练习(二):BadNeighbors
    打造你的办公环境-email篇
    IRC配置for open source community
    static wechat red package tool
    Trafic control 大框图(HTB )
  • 原文地址:https://www.cnblogs.com/thingjs/p/12937037.html
Copyright © 2020-2023  润新知