前言随着《流浪地球》、《星际穿越》等的传播和普及，宇宙中那些原本遥不可及的事物离我们越来越近了。人们对未知文明的关注和对宇宙的好奇达到了前所未有的高度。站在更高的立足点上，作为人类这一物种的一员，我们应该对我们生活的星球、我们生活的太阳系、八大行星的轨道、质量、资源储量等有一定的了解。甚至对地形有一定的了解。本系统使用Hightopo的HTforWeb产品构建轻量级的3D可视化场景。太阳能系统该系统主要用于两种场景： 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;}},距离:2000});效果：本主题提供鸟瞰和斜视两种视角，其他视角可以通过鼠标旋转。两种视角的切换由右上角的第二个和第三个圆形按钮触发。调用moveCamera方法重置相机位置：/\*\*\*switchlens\*@param{Number}num-themenumber*/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){constlist=this.dm3d.getDatas();list.each(item=>{if(iteminstanceofht.Node){if(/_board$/.test(item.getTag())){if(flag){item.s('shape3d.autorotate',true);}else{item.s('shape3d.autorotate',false);}}}});}效果：主题二：戴森球3D拓扑本系统主要展示用户选择的行星与其他星际物质的相互作用，也可用于展示卫星在行星周围的分布，以及引力和恒星之间的辐射范围等拓扑结构。鼠标悬停在星星上会触发选中状态，右边会监控到该星星的相关数据。监听mousemove后调用resetPinkOutside方法将粉色边框重置为悬停节点位置：/\*\*\*Resettheborder\*@paramnode*/resetPinkOutside(node){constpinkOutside=this.dm3d.getDataByTag('广告牌4'）；pinkOutside.setPosition3d(node.getPosition3d()\[0\],node.getPosition3d()\[1\],node.getPosition3d()\[2\]);}效果：主题三：星空气象与地形探测系统该主题主要用于呈现场景2中选中的星星上的具体探测点，点周围的等高线会自动生成3D地形，左侧有闪烁点指示。并与右侧的检测点一一对应。该功能可用于地形的展示，也可用于星体大气气象状态的展示。左下角是监测点的实时地热和气象流量数据。点击右边对应的检测点会触发右边点的缩放动画，左边对应的3D点也会同步变化，调用setAnimation(null)setTwinkleToPoints(flag){//...if(flag){if(point1_3D&&point1){if(this.animationFlags.twinklePointNum===1){point1_3D.setAnimation({change:{},start:\["change"\]});point1.setAnimation({width:{},height:{},start:\["width","height"\]});}else{SolarSystem.disableTwinkle(point1_3D,point1);}}else{SolarSystem.disableTwinkle(point1_3D,point1);//...}}}作用：关联：三个主题（系统）的联动三个系统是相互关联的，可以通过三种方式在它们之间切换。 1。点击左上角的切换按钮： 左上角是导航栏的响应范围。当鼠标悬停时，会改变动画控制器的animationFlags对应的值，触发导航栏下降，悬停和点击按钮会通过setImage方法this.g2d.getView().addEventListener('mousemove',event=>{constnode=this.g2d.getDataAt(event);lettag='';if(node){tag=node.getTag();}if('navigator'===tag){if(!this.animationFlags.navigatorRotate&&this.animationFlags.navAnimationDone){this.animationFlags.navAnimationDone=false;this.animationControl(0,true);}this.resetButtonStyle();}elseif(/^navButton/.test(tag)){this.animationFlags.navButtonOnHover=true;//防止动画过快点击按钮this.resetButtonStyle();if(!node.a('buttonOnClick')){node.setImage('buttonOnHover');}}else{this.resetButtonStyle();this.animationFlags.navButtonOnHover=false;if(this.animationFlags.navigatorRotate&&this.animationFlags.navAnimationDone){setTimeout(()=>{if(!this.animationFlags.navButtonOnHover){this.animationFlags.navButtonOnHover=true;this.animationFlags.navAnimationDone=false;this.animationControl(0,false);}},500);}}},false);效果： 2.点击底部的比例尺，对应3个模块： 3。点击主题1的星球跳转到主题2的拓扑，点击主题2的星星跳转到主题3的地形。主题3无法正向链接，只能通过前两种方式跳转：总结:本系统采用轻量高效的ht库，向量平面信息与3D物体的相对位置清晰直观，3D地形对应等值线图，高度和相互遮挡关系可以准确把握。系统满足最基本的空间场景和数据展示框架，更详细的数据展示和业务功能需要相关人员根据具体的业务场景提出。
