处在这个大数据时代势必让我们不得不追求高效,高效工作便捷生活。可在工作中想要高效完成某件事情似乎有点儿难度,比如高效开发三维可视化应用!尤其是新手更是大呼“我太难了”。 新手不会建模又该如何完成三维可视化应用?使用ThingJS,即可快速开发三维可视化应用,无论是进行园区的搭建、楼层的智能管理、工厂的数字监控、数据的控制整合、整个城市的电力监控、还是消防管理,都可以通过ThingJS快速开发。
ThingJS是优锘科技有限公司开发的一个可视化PaaS平台,使用这个平台式不收费的,但是商用的话价格是2998/年,也不贵;除此之外,ThingJS拥有“资源中心”、“在线开发”、“文档中心”、“平台与应用”、“论坛”这几个板块,当然了,这些大多是都是要登录才能查看的,像我就直接QQ登录了,登录后可以进入资源中心查看模型和场景,说实话模型有些多,官方提供的模型大多都太商业化了,我比较喜欢科通科幻的,所以有时候会下载Sketchfab网站上的可用模型,放到我的场景中去,想知道如何使用Sketchfab上的模型,可以百度查看我的文章《新手从零开始搭建3D场景之模型上传》,学会如何上传模型;“在线开发”的使用,就有那么一点点门槛了,如果你说你不会JavaScript,那我一点也帮不了你,建议放弃看这篇文章,当然,天赋超级好,看看注释就懂了的,那我也没得办法,本篇文章主要目的是告诉大家方法,如何去快速开发完成三维可视化应用,而不是亲手指导。
首先需要对自己要做的项目有一个定位,是属于大型城市(智慧城市)还是属于园区场景(校园、工厂等),搭建这两个方向的可视化应用,在步骤上有一定的区别:
搭建智慧城市:
涉及工具:
ThingJS平台中的“CItyBuilder(免费)”、“在线开发(免费)”、ChartBuilder(免费)或是echarts;
在线地图数据编辑器(GeoJSON、mapshaper等);
QGIS(处理地图数据的免费工具);
再次强调,这些工具不收费!!!除非最后项目完成需要商用,到时候联系ThingJS或者直接购买商业开发者即可。
搭建步骤:
a.使用在线地图数据编辑器(本人使用的是GeoJSON)绘制城市相关建筑,填写相关数据,推荐保存为geojson格式;
b.使用QGIS打开保存的.geojson文件,修改属性、微调地图数据(如有数据偏移可在QGIS上进行调整)
c.将调整好的数据上传至ThingJS平台中的CityBuilder,新建项目,选择对应区域,将数据在项目中使用,并且修改样式等;
d.编辑CityBuilder项目,会进入到ThingJS的“在线开发”中,同时生成一个.map文件,以后要修改地图样式或者是增加场景,就能直接右键.map文件进行编辑。
e.在“在线开发”中,使用Ctrl + B 快速打开ChartBuilder,对图表进行编辑修改以及数据对接(如何进行编辑修改请点击查看快速入门),第一次登陆会让你输入账号密码,不用输入,重新打开这个页面就好了,以后都不会再弹出提示登录的页面了,编辑完图表保存后返回到ThingJS的“在线开发”中,点击刷新按钮,刷新项目,如果发现没有出现图表,别慌,这是对的,你需要右键.cht文件,进行编辑图表和预览。
f.最后在.js文件中编写脚本,具体可以参考官方示例中的“地球”、”拾取和选择”、“摄像机”或者其他示例。
搭建智慧园区:
涉及工具:
ThingJS平台中的“CamBuilder(模模搭)”、“在线开发(免费)”、ChartBuilder(免费)或是echarts;
3dsMax(搭建特殊模型)、3dsMax 模型上传插件。
搭建步骤:
a.使用CamBuilder客户端搭建场景,给相关模型添加属性以便于控制;
b.如有特殊模型,可通过3dsMax制作,或者在Sketchfab上下载免费可用的模型(注意CC版权的要求);
c.制作好的场景将会自动上传至ThingJS平台中,新建项目,使用Ctrl +J 快捷方式打开园区场景,双击即可使用;
d.在“在线开发”中,使用Ctrl + B 快速打开ChartBuilder,对图表进行编辑修改以及数据对接(如何进行编辑修改请点击查看快速入门),第一次登陆会让你输入账号密码,不用输入,重新打开这个页面就好了,以后都不会再弹出提示登录的页面了,编辑完图表保存后返回到ThingJS的“在线开发”中https://www.thingjs.com/guide/?m=sample,点击刷新按钮,刷新项目,如果发现没有出现图表,别慌,这是对的,你需要右键.cht文件,进行编辑图表和预览。
e.最后在.js文件中编写脚本,具体可以参考官方示例中的”拾取和选择”、“摄像机”或者其他示例。
ThingJS-CityBuilder
ThingJS专为搭建智慧城市开发了一款一键城市应用,使用CityBuilder在线工具,选择目标区域和模板,即可一键生成城市模型,同时也可以通过使用ThingJS开发的建模软件:Campusbuilder(模模搭)客户端搭建场景,将场景上传至CityBuilder中进行使用,完成模型搭建功能,最后开始编辑使用CityBuilder完成的地图项目,编辑后项目将会直接转入到ThingJS“在线开发”中去,通过拖拽快捷代码,修改相对应的名称(比如图层名字),可以说十分的方便快捷,甚至经常有,模型组人员模型还没有制作完成,开发人员已经先使用CityBuilder一键生成的粗模,将应用制作完成,只需要替换对应的模型以及地图数据即可完成整个智慧城市应用。
ThingJS-CampusBuilder
ThingJS专为新手开发的一款简单的场景编辑器,通过使用CampusBuilder(模模搭),能够快速的搭建园区场景,在该客户端中,有着大量的模型以供选的,并且部分模型都是携带了相应动画效果、比如机柜开关门效果、人物行走打招呼效果,同样也有管线可以进行选择,无论是做数据中心、3D机房还是做管线、水利等都是十分方便快捷的,同时也可以导入CAD图纸快速生成建筑面:打开CampusBuilder客户端,选择新建,在新打开的便捷页面点击左上角的“文件”→“导入CAD”,选择对应的*.dwg文件,确认导入后编辑CAD生成的模型,并修改成理想效果,并且在CampusBuilder中,还有着场景市集可供我们查阅并且购买优秀的场景,使用现成的场景进行二次开发也能大大提高工作效率,减少开发成本。
ThingJS-ChartBuilder
ChartBuilder 是 ThingJS 平台为商业开发者提供的图表级别搭建组件。打开已保存的项目,点击图表按钮,选择图表模板,双击即可进入ChartBuilder;编辑自己的图表内容,编辑完成后保存;回到ThingJS,点击刷新按钮。即可出现.cht文件,右键.cht文件,即可对图表进行编辑,删除,重置,以及预览添加了图表后的ThingJS项目;
ThingJS-ThingPano
ThingPano 是基于 ThingJS 平台推出的全景工具套件,可简单高效地将高清全景图应用到 3D 环境中,实现 3D 宏观场景和全景微观场景的无缝融合,可快速调取、查看选定位置的全景图,以更加真实的环境,全视角覆盖您关注的场景。
可以结合ThingJS原始API, 与ThingPano自身API,开发多种全景互动应用。可以实现在全景图内实景漫游的同时,在3D宏观场景中实时展示对应的空间位置。
通过ThingPano可以轻松实现在编制可视化预案等情形下,在3D场景摆中放救援设施的同时,实时查看该设施在真实世界中的摆放效果,无需现场测量计算,精准评估预案可行性,提升工作效率。
还可以结合 ThingJS 中的 map 功能,实现类似百度街景应用。 使用该项技术可广泛应用于房产导购、在线旅游、生产监控和安全培训等众多场合。
数据结构说明如下:
基础数据:
panoID、title、correction、startH、startV 属性字段是全景图在播放器中加载浏览所需要的必要属性,用于确定一张全景图在播放器中的初始化位置与视角。
GPS 数据:
如果全景图中带有 GPS 定位数据,则可输出 GPS 数据用于在地图中进行定位展示。
热点数据:
存储每张全景图对应的四周其他全景图的热点链接信息,用于播放器中的热点跳转。
场景定位数据:
用于与 ThingJS 中的 3D 物体对象进行位置匹配与关系关联。
用户自定义数据:
用于存储其他用户自定义的属性字段。
路径导航数据:
用于播放器内的全景图巡路浏览。