HT 可視化監(jiān)控頁面的 2D 與 3D 連線效果

HT 是一個靈活多變的前端組件庫，具備豐富的功能和效果，滿足多種開發(fā)需求。讓我們將其效果化整為零，逐一拆解具體案例，幫助你更好地理解其實現(xiàn)方案。

此篇文章中，讓我們一起深入探討 2D 與 3D 的連線效果是如何實現(xiàn)的。我們將從基本概念、實現(xiàn)步驟、關(guān)鍵代碼多個維度，逐步剖析這個效果的具體實現(xiàn)過程，為你提供全面的知識和實踐指導(dǎo)。

盡管 2D 與 3D 連線效果看起來復(fù)雜，其本質(zhì)仍然是二維節(jié)點之間的連接。只需要通過一些巧妙的技術(shù)，就可以使其看起來像是 23D 連線效果。

1. 為了實現(xiàn) 23D 視圖效果，我們首先需要分別創(chuàng)建一個 2D 與 3D 視圖做結(jié)合，并設(shè)置一些默認屬性。

// 創(chuàng)建 3D 視圖并且將視圖添加到 DOM 顯示
dm3d = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm3d);
g3d.addToDOM();


// 創(chuàng)建 2D 視圖并且將視圖添加到 3D 視圖的 DOM 顯示
dm2d = new ht.DataModel();
g2d = new ht.graph.GraphView(dm2d);
g2d.addToDOM(g3d.getView());
g2d.setZoomable(false);

2. 封裝 23D 坐標轉(zhuǎn)換方法，這是此功能的核心。

function setPosotion(node3d, node2d) {
    // 將3D中節(jié)點坐標轉(zhuǎn)換為屏幕坐標
    var viewPoint = g3d.toViewPosition(node3d.p3()); 
    // 將屏幕坐標轉(zhuǎn)換為2D中的邏輯坐標    
    var position = g2d.getLogicalPoint(viewPoint);
    // 設(shè)置2D上跟隨3D節(jié)點位置變化的節(jié)點坐標
    node2d.p(position);
}

3. 創(chuàng)建節(jié)點并添加到對應(yīng)視圖。

// 3D中的節(jié)點
node3d = new ht.Node();
dm3d.add(node3d);


// 2D中與3D中節(jié)點連接節(jié)點
node1 = new ht.Node();
node1.p(100, 100);
dm2d.add(node1);


// 2D上跟隨3D節(jié)點位置變化的節(jié)點，使用3D節(jié)點初始化位置，并且設(shè)置為不可見狀態(tài)
node2 = new ht.Node();
setPosotion(node3d, node2);
node2.s('opacity', 0);
dm2d.add(node2);


// 創(chuàng)建連線
edge = new ht.Edge();
edge.setSource(node1);
edge.setTarget(node2);
dm2d.add(edge);

4. 同步 3D 節(jié)點和 2D 跟隨節(jié)點位置，主要有以下兩種方案：

監(jiān)聽 3D 場景 eye 和 center 變換，適用于 3D 節(jié)點位置不會改變情況，如建筑節(jié)點。

g3d.mp(e => {
    if (e.property === "eye" || e.property === "center") {
        setPosotion(node3d, node2);
    }
})

每幀都刷新，適用于場景節(jié)點位置會改變的情況，如會移動的車輛。

let func = () => {
    setPosotion(node3d, node2);
    requestAnimationFrame(func);
}
func();實現(xiàn) 23D 連線效果的核心在于精確的坐標轉(zhuǎn)換，通過使用這一方法，我們能夠顯著提升界面的視覺效果，使得 2D 信息面板與 3D 內(nèi)容具備更清晰的關(guān)聯(lián)性。這不僅使界面顯得更加豐富多彩，還大大增強了用戶對信息的理解和操作體驗。

當用戶點擊場景中的 3D 模型時，可以在 2D 視圖上展示相應(yīng)的信息面板。這個信息面板將詳細顯示所選模型的屬性和相關(guān)數(shù)據(jù)。同時，通過一條連線將 2D 信息面板與 3D 模型連接起來，使用戶明確知道哪個模型對應(yīng)哪個信息面板。這樣不僅保證了模型信息的準確顯示，還便于用戶快速找到對應(yīng)的模型和信息，提升使用效率。

用戶點擊正在移動的車輛時，系統(tǒng)將在 2D 視圖中顯示一個詳細的車輛信息面板。為了確保用戶在車輛移動時仍能輕松地將信息面板與車輛對應(yīng)起來，使用 23D 連線方法生成一條可視化連線，將車輛和信息面板連接起來。無論車輛在場景中移動到何處，這條連線都會實時更新，始終保持車輛和信息面板之間的連貫性。這樣一來，用戶可以隨時跟蹤車輛的信息，不會因為車輛的移動而混淆信息來源。

通過這種方式，優(yōu)化了用戶體驗，保證了信息的準確對接和快速訪問。

在確保 3D 節(jié)點和 2D 信息面板數(shù)據(jù)同步方面，除了使用連線來連接兩個元素之外，還可以采用坐標轉(zhuǎn)換的方法同步位置。通過坐標轉(zhuǎn)換，根據(jù) 3D 節(jié)點直接設(shè)置信息面板的位置。

這種方法特別適用于需要展示帶有視頻的面板信息的場景。由于場景中無法直接嵌入視頻，使用 2D 面板展示視頻內(nèi)容是理想的解決方案。通過坐標轉(zhuǎn)換，2D 面板可以始終與 3D 節(jié)點保持對應(yīng)，無論節(jié)點如何移動或變換位置，用戶都可以直觀地看到相關(guān)的視頻信息和其他詳細數(shù)據(jù)。

23D 連線是一種高效、直觀的方式，通過在三維空間中為 3D 對象和其對應(yīng)的 2D 信息面板之間繪制一條可視連線，解決了因?qū)ο笠苿踊蜃兓瘜?dǎo)致的信息對接問題。它極大地提升了用戶體驗和信息傳遞的準確性，特別適用于復(fù)雜和動態(tài)場景中。

我們將持續(xù)推出更多關(guān)于功能實現(xiàn)的解析文章，進一步深入探討和優(yōu)化不同情境下的應(yīng)用。敬請期待！

審核編輯 黃宇

?