ThingJS:利用JS语言,实现3D场景切换

时间:2020-7-28 作者:admin

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!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。