大数据时代如何快速开发完成三维可视化应用?

zzzzzker 7月前 1146


      如何快速高效搭建3D场景或是快速完成三维应用?新手该如何搭建三维可视化场景?新手不会建模又该如何完成三维可视化应用?使用ThingJS,即可快速开发三维可视化应用,无论是进行园区的搭建、楼层的智能管理、工厂的数字监控、数据的控制整合、整个城市的电力监控、还是消防管理,都可以通过ThingJS快速开发


      ThingJS是优锘科技有限公司开发的一个可视化PaaS平台,使用这个平台式不收费的,但是商用的话价格就得去ThingJS官方价格页面查看啦,也不贵;除此之外,ThingJS拥有“资源中心”、“在线开发”、“文档中心”、“平台与应用”、“论坛”这几个板块,当然了,这些大多是都是要登录才能查看的,像我就直接QQ登录了,登录后可以进入资源中心查看模型和场景,说实话模型有些多,官方提供的模型大多都太商业化了,我比较喜欢科通科幻的,所以有时候会下载Sketchfab网站上的可用模型,放到我的场景中去,想知道如何使用Sketchfab上的模型,可以查看我的文章《新手从零开始搭建3D场景之模型上传》,学会如何上传模型;“在线开发”的使用,就有那么一点点门槛了,如果你说你不会JavaScript,那我一点也帮不了你,建议放弃看这篇文章,当然,天赋超级好,看看注释就懂了的,那我也没得办法,本篇文章主要目的是告诉大家方法,如何去快速开发完成三维可视化应用,而不是亲手指导,若想搭建一个智慧城市的可视化应用Demo,可以查看《 使用CityBuilder搭建智慧城市3D可视化模型之创建智慧三维城市(上)》 以及《 使用CityBuilder搭建智慧城市3D可视化模型之创建智慧三维城市(下) 


      首先需要对自己要做的项目有一个定位,是属于大型城市(智慧城市)还是属于园区场景(校园、工厂等),搭建这两个方向的可视化应用,在步骤上有一定的区别:

 

搭建智慧城市:

       涉及工具:

              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的“在线开发”中,点击刷新按钮,刷新项目,如果发现没有出现图表,别慌,这是对的,你需要右键.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 物体对象进行位置匹配与关系关联。

  • 用户自定义数据:

    用于存储其他用户自定义的属性字段。

  • 路径导航数据:

    用于播放器内的全景图巡路浏览。


       希望该文章能对大家有帮助,有对于ThingJS感兴趣的朋友也可以加入ThingJS官方交流群(QQ群:225986500),或者在本论坛发帖询问。


最后于 7月前 被zzzzzker编辑 ,原因:
最新回复 (2)
  • 417673581@qq.com 24天前
    0 引用 2
    你好,正在按您的帖子学习CItyBuilder,看教程第一步用GeoJSON绘制城市相关建筑,填写相关数据,具体怎么操作?有没有视频教程呢?还有第二步用QGIS打开保存的.geojson文件,修改属性、微调地图数据,都要怎么修改,修改什么内容呢?
  • 417673581@qq.com 24天前
    0 引用 3
    方便的时候加一下微信好吗?请多多指教!13943810298

你可以在 登录 or 注册 后,对此帖发表评论!

返回