ThingJS demo展示:3D场景轻松切换

摘要:
ThingJS3D开发框架不仅易学而且很适合屏幕展示,具有广阔的物联网发展前景。ThingJS经过多年开发经验的沉淀,得出了四个开发步骤:场景搭建、在线开发、数据对接、项目部署,同时把建模和开发分开,设计人员使用CampusBuilder或者cityBuilder搭建工具,无代码轻松拖拽元素即可制作模型,随后开发人员使用ThingJS在线开发,从官方示例了解最新的酷炫功能,基于JS代码轻松开发,不需要额外培训!

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

ThingJS demo展示:3D场景轻松切换第1张

使用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

/**

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

*/

// 场景地址

varcampusUrl = [

'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'

]

// 存储创建完成的园区

varcurCampus;

varapp =newTHING.App({

url: campusUrl[0]

});

app.on('load',function(ev) {

curCampus = ev.campus;

app.level.change(curCampus);

newTHING.widget.Button('场景切换',function() {

varurl = curCampus.url;

// 动态创建园区

if(url === campusUrl[0]) {

createCampus(campusUrl[1]);

}

else{

createCampus(campusUrl[0]);

}

});

});

functioncreateCampus(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 demo展示:3D场景轻松切换》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇关于Eclipse中开发插件(二)BUUCTF-数据包中的线索 1下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

url、 src 和href 标签的区别

url 统一资源定位符  标准格式   协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询 url语法规则   scheme://host.domain:port/path/filename   https://www.baidu.com/daily/view?id=163664 scheme  定义因特网服务的类型,常见的...

【Nginx-HTTP-02】HTTP协议超级详解

HTTP协议简介 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 HTTP的发展是由蒂姆·伯纳斯-李于1989年在欧洲核子研究组织(CERN)所发起。HTTP的标准制定由万维网协会(World Wide Web Cons...

Android 实现异步加载图片

麦洛开通博客以来,有一段时间没有更新博文了.主要是麦洛这段时间因项目开发实在太忙了.今天周六还在公司加班,苦逼程序猿都是这样生活的. 今天在做项目的时候,有一个实现异步加载图片的功能,虽然比较简单但还是记录一下吧.因为麦洛之前实现异步加载图片都是使用了AsynTask这个API,继续这个类,实现起来非常简单也很方便.在doInBackground()方法里...

js批量下载文件

​关于兼容性问题:  <a href="http://t.zoukankan.com/xxx.docx" target='_blank'></a>  下载文件时,这种写法是没有兼容性问题;但是下载图片时,IE 上会出现当前页面直接打开图片的问题,即便是加了 target='_blank'。单个文件批量下载方法一:H5 <a&g...

python爬虫数据解析之xpath

xpath是一门在xml文档中查找信息的语言。xpath可以用来在xml文档中对元素和属性进行遍历。 在xpath中,有7中类型的节点,元素,属性,文本,命名空间,处理指令,注释及根节点。 节点 首先看下面例子: <?xml version="1.0" encoding="ISO-8859-1"?> <bookstore> &l...

git 给远程库 添加多个url地址

 目录[-] 前提 使用流程 原理解析 注意 Other 参考文章 作者:shede333主页:http://my.oschina.net/shede333 && http://blog.sina.com.cn/u/1509658847版权声明:原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | [Creative Commo...