搭建太陽系可視化系統，帶你探索宇宙的未知奧祕

前言

近年來隨着引力波的發現、黑洞照片的拍攝、火星上存在水的證據發現等科學上的突破，以及文學影視做品中諸如《三體》、《流浪地球》、《星際穿越》等的傳播普及，宇宙空間中那些本來高不可攀的事物離咱們愈來愈近，人們對未知文明的關注和對宇宙空間的好奇達到了史無前例的高度。站在更高的立足點上，做爲人類這個物種中的一員，咱們理所應當對咱們生活的星球、所在的太陽系有必定的認識，對 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.海王星也是一顆冰質巨行星，它有着熒熒的淡藍色光。

而太陽系中全部天體都圍繞太陽這顆恆星運轉。

效果以下：

該主題提供兩種視角，鳥瞰和斜視，其它視角能夠經過鼠標自行旋轉

兩種視角的切換由右上角第2、三個圓形按鈕觸發。

效果以下：

信息框默認採用跟隨星體一塊兒旋轉，這能夠達到俯視視角不出現信息框，看起來更清爽。

若是須要查看星體詳情，能夠經過點擊右上角播放按鈕，該按鈕會觸發全部信息框朝向屏幕方向。

效果以下：

主題二：戴森球星體 3D 拓撲結構

本系統主要展現用戶所點選的行星與其它星際物質的相互做用，也可用於展現行星周圍衛星的分佈狀況，以及展現星體間引力、輻射範圍等的拓撲結構。

鼠標懸停在一個星體上會觸發選中狀態，右側會監控該星體的相關數據。

主題三：星體氣象、地形檢測系統

該主題主要用於呈如今場景二中點選的星體上具體的檢測點位，點位周邊的等高線在左側自動生成一個 3D 的地形和閃爍的點位示意，並與右側的檢測點位一一對應。

該功能可用於地形的呈現，也能夠用於星體大氣層的氣象狀態展現。

左下角實時監控點位的地質熱量、氣象流動數據。

點選右側對應檢測點，會觸發右側點的縮放動畫，同時左側對應的 3D 點位也會同步變化。

效果以下：

關聯：三個主題（系統）的聯動

三個系統是互相關聯的，相互切換的方式有三種。

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