关于javascript:搭建太阳系可视化系统带你探索宇宙的未知奥秘

31次阅读

共计 2481 个字符,预计需要花费 7 分钟才能阅读完成。

前言

近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等迷信上的冲破,以及文学影视作品中诸如《三体》、《漂泊地球》、《星际穿梭》等的流传遍及,宇宙空间中那些本来遥不可及的事物离咱们越来越近,人们对未知文化的关注和对宇宙空间的好奇达到了前所未有的高度。站在更高的立足点上,作为人类这个物种中的一员,咱们理所应当对咱们生存的星球、所在的太阳系有肯定的意识,对 8 大行星各自的运行轨道、品质、资源存储量甚至是地形有肯定的理解。

HT for Web 不止自主研发了弱小的基于 HTML5 的 2D、3D 渲染引擎,为可视化提供了丰盛的展现成果。介于 2D 组态 和 3D 组态 上,Hightopo(以下简称 HT)的 HT for Web 产品上的有着丰盛的组态化可供选择。本文将使用 Hightopo(以下简称 HT)的 HT for Web 产品搭载出一个基于 HTML5 WebGL 联合 2D/3D 的 太阳系可视化零碎。

界面简介及成果预览

本零碎采纳 Hightopo 的 HT for Web 产品来结构轻量化的 3D 可视化场景,该零碎应用轻量高效的 ht 库,矢量立体信息与 3D 对象进行关联,并采纳 3D 拓扑可视化出现,绝对地位清晰直观,3D 地形与等高线图对应,海拔高度和互相遮挡关系都能够精确把握,该零碎满足了最根本的太空场景和数据出现的框架。

预览地址:https://www.hightopo.com/demo/solar-system/

实现价值

1. 作为科研成果、新发现的载体,做 3D 太空数据可视化出现,用于向一般民众科普太阳系的形成、各行星组织构造等常识,可置于博物馆大屏、学校大屏,也可用于互联网产品,作为航空航天类网站的门户页、展现页。

2. 作为宇航局、航空航天相干钻研机构的驾驶舱,在 3D 可视化界面中对行星绝对地位、星体状态、星体气象、星体地形有一个直观疾速的理解,在宇宙空间摸索越来越胜利的当下,在数据传输技术失去速度和品质上的冲破后,甚至能够通过该系统对行星状态做实时监控出现,对宇航员的作业点、作业状况做在线监控。在配置上人造卫星轨道、监控区域的数据后,本零碎可用作卫星零碎,形容覆盖范围和出现观测数据。

成果实现

主题一:太阳系检测零碎

本零碎次要展现 8 大行星绕太阳公转轨道、绝对地位、星体品质、资源含量等信息。

右上角行星按钮会触发视角切换,切换至绝对应的行星观测点。行星的图标别离为水星,金星,地球,火星,土木星,土星,天王星,海王星。图标的造型也是依据行星的特色进行的设计,可能更家直观的分辨出 8 大行星。

在这里我简略介绍下太阳系及 8 大行星,加深下对太阳系的理解:

1. 水星是八大行星中最小的一个,水星上的温差极大;

2. 金星以顺时针方向自转,太阳西升东落;自转速度十分迟缓;

3. 地球是人来已知的惟一有生命存在的星球,大概 71% 的面积被水笼罩。

4. 火星是岩石星球,它有两颗卫星。它的土壤和大气中富含铁矿物,因而呈红色。

5. 木星上的它自传很快,每 10 小时自转一圈,因而能产生强风;

6. 土星是气态巨行星,土星上的风速是地球上的 5 倍,这使土星看上去就想有一条金黄色的云带;

7. 天王星是冰质巨行星,有 13 层光环,它侧躺着自转,自转方向为顺时针。天王星上的一年约等于地球上的 84 年;

8. 海王星也是一颗冰质巨行星,它有着荧荧的淡蓝色光。

而太阳系中所有天体都围绕太阳这颗恒星运行。

成果如下:

该主题提供两种视角,鸟瞰和斜视,其它视角能够通过鼠标自行旋转

两种视角的切换由右上角第二、三个圆形按钮触发。

成果如下:

信息框默认采纳追随星体一起旋转,这能够达到仰视视角不呈现信息框,看起来更清新。

如果须要查看星体详情,能够通过点击右上角播放按钮,该按钮会触发所有信息框朝向屏幕方向。

成果:

主题二:戴森球星体 3D 拓扑构造

本零碎次要展现用户所点选的行星与其它星际物质的相互作用,也可用于展现行星四周卫星的散布状况,以及展现星体间引力、辐射范畴等的拓扑构造。

鼠标悬停在一个星体上会触发选中状态,右侧会监控该星体的相干数据。

主题三:星体气象、地形检测零碎

该主题次要用于出现在场景二中点选的星体上具体的检测点位,点位周边的等高线在左侧主动生成一个 3D 的地形和闪动的点位示意,并与右侧的检测点位一一对应。

该性能可用于地形的出现,也能够用于星体大气层的气象状态展现。

左下角实时监控点位的地质热量、气象流动数据。

点选右侧对应检测点,会触发右侧点的缩放动画,同时左侧对应的 3D 点位也会同步变动,其它的点则调用 setAnimation(null)

关联:三个主题(零碎)的联动

三个零碎是相互关联的,互相切换的形式有三种。

1. 点选左上角的切换按钮:

左上角局部均为导航栏的响应范畴,鼠标悬停时会扭转动画控制器 animationFlags 的对应值,触发导航栏落下来,悬停和点选按钮会通过 setImage 办法设置不同的背景

2. 点击最下方的标尺栏,别离对应 3 个模块:

3. 点选主题一中的行星跳转到的主题二的拓扑构造,点选主题二的星体跳转主题三的地形,主题三无奈向前关联,只能通过前两种形式进行跳转:

总结

随着物联网、大数据等新兴技术大幅崛起,人工智能、大数据、深度学习等新兴概念已逐渐浸透至生存的各个领域。Web 3D 有着有限的设想空间,有着十分丰盛的数据出现形式,更有着诸多让人眼前一亮的可视化成果,利用 HT 提供的二三维引擎能够轻松地实现太阳系的可视化。让人们在足不出户的状况下就能够理解到宇宙的神秘,摸索到人类许多未知的信息。并且 HT 长久以来始终致力于多样化行业零碎可视化的搭建,涉猎的技术行业所累积的教训,通过自主翻新研发的技术产品,曾经打造出许多行业上具备代表性意义的可视化管控零碎。

 2019 咱们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多离奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时,你也能够查看更多案例及成果:https://www.hightopo.com/demos/index.html

正文完
 0