HTML5中怎么實(shí)現(xiàn)一個3D網(wǎng)絡(luò)拓?fù)錁?/h1>

這篇文章給大家介紹 HTML5 中怎么實(shí)現(xiàn)一個3D網(wǎng)絡(luò)拓?fù)錁洌瑑?nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比荔波網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式荔波網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋荔波地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

1. 創(chuàng)建一個樹狀結(jié)構(gòu)

有了解過HT for Web的朋友，對樹狀結(jié)構(gòu)數(shù)據(jù)的創(chuàng)建應(yīng)該都不陌生，在這里我就不做深入的探討了。樹狀結(jié)構(gòu)數(shù)據(jù)的創(chuàng)建很簡單，在這里為了讓代碼更簡潔，我封裝了三個方法來創(chuàng)建樹狀結(jié)構(gòu)數(shù)據(jù)，具體代碼如下：

/**
 * 創(chuàng)建連線
 * @param {ht.DataModel} dataModel - 數(shù)據(jù)容器
 * @param {ht.Node} source - 起點(diǎn)
 * @param {ht.Node} target - 終點(diǎn)
 */
function createEdge(dataModel, source, target) {
    // 創(chuàng)建連線，鏈接父親節(jié)點(diǎn)及孩子節(jié)點(diǎn)
    var edge = new ht.Edge();
    edge.setSource(source);
    edge.setTarget(target);
    dataModel.add(edge);
}

/**
 * 創(chuàng)建節(jié)點(diǎn)對象
 * @param {ht.DataModel} dataModel - 數(shù)據(jù)容器
 * @param {ht.Node} [parent] - 父親節(jié)點(diǎn)
 * @returns {ht.Node} 節(jié)點(diǎn)對象
 */
function createNode(dataModel, parent) {
    var node = new ht.Node();
    if (parent) {
        // 設(shè)置父親節(jié)點(diǎn)
        node.setParent(parent);

createEdge(dataModel, parent, node);
    }
    // 添加到數(shù)據(jù)容器中
    dataModel.add(node);
    return node;
}

/**
 * 創(chuàng)建結(jié)構(gòu)樹
 * @param {ht.DataModel} dataModel - 數(shù)據(jù)容器
 * @param {ht.Node} parent - 父親節(jié)點(diǎn)
 * @param {Number} level - 深度
 * @param {Array} count - 每層節(jié)點(diǎn)個數(shù)
 * @param {function(ht.Node, Number, Number)} callback - 回調(diào)函數(shù)(節(jié)點(diǎn)對象，節(jié)點(diǎn)對應(yīng)的層級，節(jié)點(diǎn)在層級中的編號)
 */
function createTreeNodes(dataModel, parent, level, count, callback) {
    level--;
    var num = (typeof count === 'number' ? count : count[level]);

while (num--) {
        var node = createNode(dataModel, parent);
        // 調(diào)用回調(diào)函數(shù)，用戶可以在回調(diào)里面設(shè)置節(jié)點(diǎn)相關(guān)屬性
        callback(node, level, num);
        if (level === 0) continue;
        // 遞歸調(diào)用創(chuàng)建孩子節(jié)點(diǎn)
        createTreeNodes(dataModel, node, level, count, callback);
    }
}

嘿嘿，代碼寫得可能有些復(fù)雜了，簡單的做法就是嵌套幾個for循環(huán)來創(chuàng)建樹狀結(jié)構(gòu)數(shù)據(jù)，在這里我就不多說了，接下來我們來探究第二個問題。

2. 在2D拓?fù)湎履M3D樹狀結(jié)構(gòu)每層的半徑計(jì)算

在3D下的樹狀結(jié)構(gòu)體***的問題就在于，每個節(jié)點(diǎn)的層次及每層節(jié)點(diǎn)圍繞其父親節(jié)點(diǎn)的半徑計(jì)算。現(xiàn)在樹狀結(jié)構(gòu)數(shù)據(jù)已經(jīng)有了，那么接下來就該開始計(jì)算半徑了，我們從兩層樹狀結(jié)構(gòu)開始推算：

HTML5中怎么實(shí)現(xiàn)一個3D網(wǎng)絡(luò)拓?fù)錁?/a>
分享鏈接：http://www.jbt999.com/article34/pdpcpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、、自適應(yīng)網(wǎng)站、小程序開發(fā)、域名注冊、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)