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

本系统给与 Hightopo 的 HT for Web 产品来结构轻量化的 3D 可视化场景。

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

　　1.作为科研成就、新发明的载体，做 3D 太空数据可视化泛起，用于向普通公众科普太阳系的组成、各行星组织布局等常识，可置于博物馆大屏、学校大屏，也可用于互联网产品，作为航空航天类网站的门户页、展示页。

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

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

界面简介及效果预览 

主题一：太阳系检测系统

本系统主要展示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; } } ); }

效果：

信息框默认给与跟从星体一起旋转，这可以到达俯视视角不呈现信息框，看起来更清爽。

如果需要检察星体详情，可以通过点击右上角播放按钮，该按钮会触发所有信息框朝向屏幕标的目的。

通过转改观静面板 shape3d.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 拓扑布局

本系统主要展示用户所点选的行星与其它星际物质的彼此感化，也可用于展示行星周围卫星的漫衍情况，以及展示星体间引力、辐射范畴等的拓扑布局。

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

通过监听 mousemove 后挪用 resetPinkOutside 要领，将粉色边框从头设置到悬停的 node 位置：

/** * 从头设置边框 * @param node */ resetPinkOutside(node) { const pinkOutside = this.dm3d.getDataByTag(‘billboard4‘); pinkOutside.setPosition3d(node.getPosition3d()[0],node.getPosition3d()[1],node.getPosition3d()[2]); }

效果：

主题三：星体气象、地形检测系统

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

该成果可用于地形的泛起，也可以用于星体大气层的气象状态展示。

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

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