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

            }

        });

    }

     

  • 相关阅读:
    每日一篇文献:Robotic pick-and-place of novel objects in clutter with multi-affordance grasping and cross-domain image matching
    每日一篇文献:Intuitive Bare-Hand Teleoperation of a Robotic Manipulator Using Virtual Reality and Leap Motion
    每日一篇文献:Virtual Kinesthetic Teaching for Bimanual Telemanipulation
    HEBI Robotic Arm VR Teleoperation
    「iQuotient Case」AR device teleoperated robotic arm
    VR and Digital Twin Based Teleoperation of Robotic Arm
    HEBI Robotic Arm VR Teleoperation
    Human Robot Interaction
    Immersive Teleoperation Project
    机器人演示学习
  • 原文地址:https://www.cnblogs.com/thingjs/p/13385871.html
Copyright © 2011-2022 走看看