前言

近年來隨著引力波的發(fā)現(xiàn)、黑洞照片的拍攝、火星上存在水的證據(jù)發(fā)現(xiàn)等科學(xué)上的突破，以及文學(xué)影視作品中諸如《三體》、《流浪地球》、《星際穿越》等的傳播普及，宇宙空間中那些原本遙不可及的事物離我們越來越近，人們對未知文明的關(guān)注和對宇宙空間的好奇達(dá)到了前所未有的高度。站在更高的立足點(diǎn)上，作為人類這個物種中的一員，我們理所應(yīng)當(dāng)對我們生活的星球、所在的太陽系有一定的認(rèn)識，對 8 大行星各自的運(yùn)行軌道、質(zhì)量、資源存儲量甚至是地形有一定的了解。

本系統(tǒng)采用 Hightopo 的 HT for Web 產(chǎn)品來構(gòu)造輕量化的 3D 可視化場景。

Solar System 這套系統(tǒng)主要用于兩種場景：

　　1.作為科研成果、新發(fā)現(xiàn)的載體，做 3D 太空數(shù)據(jù)可視化呈現(xiàn)，用于向普通民眾科普太陽系的構(gòu)成、各行星組織結(jié)構(gòu)等知識，可置于博物館大屏、學(xué)校大屏，也可用于互聯(lián)網(wǎng)產(chǎn)品，作為航空航天類網(wǎng)站的門戶頁、展示頁。

　　2.作為宇航局、航空航天相關(guān)研究機(jī)構(gòu)的駕駛艙，在 3D 可視化界面中對行星相對位置、星體狀態(tài)、星體氣象、星體地形有一個直觀快速的了解，在宇宙空間探索越來越成功的當(dāng)下，在數(shù)據(jù)傳輸技術(shù)得到速度和質(zhì)量上的突破后，甚至可以通過該系統(tǒng)對行星狀態(tài)做實(shí)時監(jiān)控呈現(xiàn)，對宇航員的作業(yè)點(diǎn)、作業(yè)情況做在線監(jiān)控。在配置上人造衛(wèi)星軌道、監(jiān)控區(qū)域的數(shù)據(jù)后，本系統(tǒng)可用作衛(wèi)星系統(tǒng)，描述覆蓋范圍和呈現(xiàn)觀測數(shù)據(jù)。

預(yù)覽地址：?https://www.hightopo.com/demo/solar-system/

界面簡介及效果預(yù)覽?

主題一：太陽系檢測系統(tǒng)

?本系統(tǒng)主要展示8大行星繞太陽公轉(zhuǎn)軌道、相對位置、星體質(zhì)量、資源含量等信息。

右上角行星按鈕會觸發(fā)視角切換，切換至相對應(yīng)的行星觀測點(diǎn)

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

效果：

該主題提供兩種視角，鳥瞰和斜視，其它視角可以通過鼠標(biāo)自行旋轉(zhuǎn)

兩種視角的切換由右上角第二、三個圓形按鈕觸發(fā)。

調(diào)用 moveCamera 方法重新設(shè)置相機(jī)位置：

/\*\*
 \* 切換鏡頭
 \* @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;
            }
        }
    );
}

?效果：

信息框默認(rèn)采用跟隨星體一起旋轉(zhuǎn)，這可以達(dá)到俯視視角不出現(xiàn)信息框，看起來更清爽。

如果需要查看星體詳情，可以通過點(diǎn)擊右上角播放按鈕，該按鈕會觸發(fā)所有信息框朝向屏幕方向。

通過改變消息面板 shape3d.autorotate 來實(shí)現(xiàn)：

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 拓?fù)浣Y(jié)構(gòu)

本系統(tǒng)主要展示用戶所點(diǎn)選的行星與其它星際物質(zhì)的相互作用，也可用于展示行星周圍衛(wèi)星的分布情況，以及展示星體間引力、輻射范圍等的拓?fù)浣Y(jié)構(gòu)。

鼠標(biāo)懸停在一個星體上會觸發(fā)選中狀態(tài)，右側(cè)會監(jiān)控該星體的相關(guān)數(shù)據(jù)。

通過監(jiān)聽 mousemove 后調(diào)用 resetPinkOutside 方法，將粉色邊框重新設(shè)置到懸停的 node 位置：

/\*\*
 \* 重新設(shè)置邊框
 \* @param node
 */
resetPinkOutside(node) {
    const pinkOutside = this.dm3d.getDataByTag('billboard4');
    pinkOutside.setPosition3d(node.getPosition3d()\[0\],node.getPosition3d()\[1\],node.getPosition3d()\[2\]);
}

效果：

主題三：星體氣象、地形檢測系統(tǒng)

該主題主要用于呈現(xiàn)在場景二中點(diǎn)選的星體上具體的檢測點(diǎn)位，點(diǎn)位周邊的等高線在左側(cè)自動生成一個 3D 的地形和閃爍的點(diǎn)位示意，并與右側(cè)的檢測點(diǎn)位一一對應(yīng)。

該功能可用于地形的呈現(xiàn)，也可以用于星體大氣層的氣象狀態(tài)展示。

左下角實(shí)時監(jiān)控點(diǎn)位的地質(zhì)熱量、氣象流動數(shù)據(jù)。

點(diǎn)選右側(cè)對應(yīng)檢測點(diǎn)，會觸發(fā)右側(cè)點(diǎn)的縮放動畫，同時左側(cè)對應(yīng)的 3D 點(diǎn)位也會同步變化，其它的點(diǎn)則調(diào)用 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);
            //...
        }
    }
}

效果：

關(guān)聯(lián)：三個主題(系統(tǒng))的聯(lián)動

三個系統(tǒng)是互相關(guān)聯(lián)的，相互切換的方式有三種。

　　1.點(diǎn)選左上角的切換按鈕：

　　左上角部分均為導(dǎo)航欄的響應(yīng)范圍，鼠標(biāo)懸停時會改變動畫控制器 animationFlags 的對應(yīng)值，觸發(fā)導(dǎo)航欄落下來，懸停和點(diǎn)選按鈕會通過 setImage 方法設(shè)置不同的背景

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; // 防止動畫過快導(dǎo)致無法點(diǎn)選按鈕
        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.點(diǎn)擊最下方的標(biāo)尺欄，分別對應(yīng) 3 個模塊：

?　　3.點(diǎn)選主題一中的行星跳轉(zhuǎn)到的主題二的拓?fù)浣Y(jié)構(gòu)，點(diǎn)選主題二的星體跳轉(zhuǎn)主題三的地形，主題三無法向前關(guān)聯(lián)，只能通過前兩種方式進(jìn)行跳轉(zhuǎn)：

總結(jié)：

該系統(tǒng)使用輕量高效的 ht 庫，矢量平面信息與 3D 對象進(jìn)行關(guān)聯(lián)，并采用 3D 拓?fù)淇梢暬尸F(xiàn)，相對位置清晰直觀，3D 地形與等高線圖對應(yīng)，海拔高度和相互遮擋關(guān)系都可以準(zhǔn)確把握。

該系統(tǒng)滿足了最基本的太空場景和數(shù)據(jù)呈現(xiàn)的框架，更為詳盡的數(shù)據(jù)呈現(xiàn)和業(yè)務(wù)功能有待相關(guān)的工作人員根據(jù)具體的業(yè)務(wù)場景提出更詳盡的需求。