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

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

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

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

// 創(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 坐標(biāo)轉(zhuǎn)換方法，這是此功能的核心。

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

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

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


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


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


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

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

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

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

每幀都刷新，適用于場(chǎng)景節(jié)點(diǎn)位置會(huì)改變的情況，如會(huì)移動(dòng)的車(chē)輛。

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

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

用戶(hù)點(diǎn)擊正在移動(dòng)的車(chē)輛時(shí)，系統(tǒng)將在 2D 視圖中顯示一個(gè)詳細(xì)的車(chē)輛信息面板。為了確保用戶(hù)在車(chē)輛移動(dòng)時(shí)仍能輕松地將信息面板與車(chē)輛對(duì)應(yīng)起來(lái)，使用 23D 連線(xiàn)方法生成一條可視化連線(xiàn)，將車(chē)輛和信息面板連接起來(lái)。無(wú)論車(chē)輛在場(chǎng)景中移動(dòng)到何處，這條連線(xiàn)都會(huì)實(shí)時(shí)更新，始終保持車(chē)輛和信息面板之間的連貫性。這樣一來(lái)，用戶(hù)可以隨時(shí)跟蹤車(chē)輛的信息，不會(huì)因?yàn)檐?chē)輛的移動(dòng)而混淆信息來(lái)源。

通過(guò)這種方式，優(yōu)化了用戶(hù)體驗(yàn)，保證了信息的準(zhǔn)確對(duì)接和快速訪(fǎng)問(wèn)。

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

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

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

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

審核編輯 黃宇

?