前言

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

本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景。

Solar System 这套系统主要用于两种场景:

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

  2.作为宇航局、航空航天相关研究机构的驾驶舱,在 3D 可视化界面中对行星相对位置、星体状态、星体气象、星体地形有一个直观快速的了解,在宇宙空间探索越来越成功的当下,在数据传输技术得到速度和质量上的突破后,甚至可以通过该系统对行星状态做实时监控呈现,对宇航员的作业点、作业情况做在线监控。在配置上人造卫星轨道、监控区域的数据后,本系统可用作卫星系统,描述覆盖范围和呈现观测数据。

预览地址: 

 本系统主要展示8大行星绕太阳公转轨道、相对位置、星体质量、资源含量等信息。

右上角行星按钮会触发视角切换,切换至相对应的行星观测点

复制代码
this.g3d.flyTo(data, {     animation: {         duration: 1000,         easing: function (t) {             return (2-t) * t;         }     },     distance: 2000 });
复制代码

效果:

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

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

调用 moveCamera 方法重新设置相机位置:

复制代码
/**  * 切换镜头  * @param {Number} num - 主题编号  */ triggerThemeCamera(num) {     //...    this.g3d.moveCamera(         [ 6742.5, 4625.6, -836.7],         [0, 0, 0],         {             duration: 500,             easing: function (t) {                 return (2-t) * t;             }         }     ); }
复制代码

 效果:

信息框默认采用跟随星体一起旋转,这可以达到俯视视角不出现信息框,看起来更清爽。

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

通过改变消息面板 style.autorotate 来实现:

复制代码
setBillboardToCamera(flag) {     const list = this.dm3d.getDatas();     list.each( item => {         if (item instanceof ht.Node) {             if (/_board$/.test(item.getTag())) {                 if (flag) {                     item.s('shape3d.autorotate', true);                 }                 else {                     item.s('shape3d.autorotate', false);                 }             }         }     }); }
复制代码

效果:

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

本系统主要展示用户所点选的行星与其它星际物质的相互作用,也可用于展示行星周围卫星的分布情况,以及展示星体间引力、辐射范围等的拓扑结构。

鼠标悬停在一个星体上会触发选中