zoukankan      html  css  js  c++  java
  • ThingJS demo展示:3D场景轻松切换

     

    ThingJS 3D开发框架不仅易学而且很适合屏幕展示,具有广阔的物联网发展前景。

     

    使用ThingJS官方神奇模模搭来搭建场景,这个相信大家都很熟悉,它的场景能够自动同步到ThingJS网站中去,毕竟是一家亲,如果ThingJS在线平台找不到,那不是平台的问题,而是你的操作问题!记得回到模模搭客户端查看是否同步完全,或者是上传的obj模型因为标准或者规范的问题而被拒绝的,就可能导致场景无法正常同步,只要查看标准文档进行操作就可以啦!

    物联网可视化项目主要涉及大型而复杂的园区、地理地形或者工程等,越复杂就越需要合理规划,ThingJS是如何简化这些开发流程的呢?我们是有神器助攻的!ThingJS经过多年开发经验的沉淀,得出了四个开发步骤:场景搭建、在线开发、数据对接、项目部署,同时把建模和开发分开,设计人员使用CampusBuilder(又称模模搭)或者cityBuilder搭建工具,无代码轻松拖拽元素即可制作模型,随后开发人员使用ThingJS在线开发,从官方示例了解最新的酷炫功能,基于JS代码轻松开发,不需要额外培训!

    模模搭可以选择对应的模型搭建一个工厂或者是粮仓,但是特殊模型也有,可以从其他位置加载并上传使用,ThingJS推荐使用3DMAX工具搭建特殊模型,并提供3DMAX上传插件来完成传输,这些插件资源都可以在官网-资源中心下载。

    在线开发的时候如何引用任何场景的URL?使用快捷键Ctrl+J或者直接点击园区icon打开园区界面,双击对应场景即可出现该场景的URL,引用完毕之后,参考如下官方示例进行不同的场景切换,一切清楚明白无保留!

    如何在ThingJS开发平台进行一个场景的动态切换,有以下三步:

    1、首先要有两个以上可以选择切换的场景,在模模搭场景搭建工具中进行建模

    2、初始界面默认为第一个加载的场景,嵌入自由进出场景层级的功能

    3、加入一个切换按钮,通过点击这个按钮,场景之间可以迅速切换,呈现淡入效果

    因为物联网数字化转型,对于3D可视化的需求是空前的,为了满足这一需求,小步快步多次迭代是最好的策略,这里就少不了一款低成本又易用的工具支持。

    代码示例如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    /**

     * 说明:通过动态创建场景,实现场景切换

     */

     

    // 场景地址

    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);

            }

        });

    }

     

  • 相关阅读:
    在ubuntu系统使用SSR
    Pandas库
    Numpy
    06-Python之标准库
    do{}while(0)
    inet_XX族函数
    大端小端
    c++ 强制类型转换
    auto类型推导
    const浅析
  • 原文地址:https://www.cnblogs.com/thingjs/p/13385871.html
Copyright © 2011-2022 走看看