基於 HTML5 + WebGL 的太陽系 3D 展現系統

前言

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

效果：

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

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

調用 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)

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 => {
    const node = this.g2d.getDataAt(event);
    let tag = '';
    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();
    }
    else if (/^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.點選主題一中的行星跳轉到的主題二的拓撲結構，點選主題二的星體跳轉主題三的地形，主題三沒法向前關聯，只能經過前兩種方式進行跳轉：

總結：

該系統使用輕量高效的 ht 庫，矢量平面信息與 3D 對象進行關聯，並採用 3D 拓撲可視化呈現，相對位置清晰直觀，3D 地形與等高線圖對應，海拔高度和相互遮擋關係均可以準確把握。

該系統知足了最基本的太空場景和數據呈現的框架，更爲詳盡的數據呈現和業務功能有待相關的工做人員根據具體的業務場景提出更詳盡的需求。