threeJS如何實現智慧樓宇管理平臺

示例描述與操作指南

點擊示例內各個功能，可以查看到建築中的監控圖像，瞭解各個樓層的熱力分佈，同時可查看各層建築的構件詳情，樓層剖切，也可觀察樓層中各系統的佔比，更快速的處理建築中突發情況，實現智慧樓宇的意義。

示例效果展示

應用場景

智慧樓宇管理平臺管理系統是智能建築的主要組成部分之一。
智能建築通過樓宇自動化系統實現建築物（羣）內設備與建築環境的全面監控與管理，爲建築的使用者營造一個舒適、安全、經濟、高效、便捷的工作生活環境，並通過優化設備運行與管理，降低運營費用。

實現步驟

第一步 初始化設置功能

加載完模型後初始化設置功能

// 初始化設置功能
function initSetting() {
    bindSettingEvent();
}

第二步 初始化查看設備信息功能

加載完模型後初始化查看設備信息功能

// 初始化查看設備信息功能
function initEquipmentInfo() {
    // 監聽點擊構件事件
    component.on &&
        component.on("click", function (rlt) {
            const panelDom = $("#attribute-show");
            if (!panelDom.parents(".panel").hasClass("active")) {
                // 若設備信息面板未激活，則退出
                return;
            }
            if (!rlt.status) {
                // 若點擊查看數據失敗，則清空信息、提示用戶並退出
                switcEmptyTip(true);
                panelDom.find("li:not(.empty-tip)").remove(); // 刪除舊數據
                return;
            }
            const {
                componentKey,
                componentName,
                componentTypeEx,
                detailInfo = {},
            } = rlt;
            let renderHtml = `<li>
                                    <div class="name">構件名稱</div>
                                    <div class="content">${componentName}</div>
                                </li>
                                <li>
                                    <div class="name">構件Key</div>
                                    <div class="content">${componentKey}</div>
                                </li>
                                <li>
                                    <div class="name">構件類型</div>
                                    <div class="content">${componentTypeEx}</div>
                                </li>`;
            if (Object.keys(detailInfo).length > 0) {
                Object.values(detailInfo).forEach((item) => {
                    for (const itemKey in item) {
                        if (item.hasOwnProperty(itemKey)) {
                            renderHtml += `<li>
                                                <div class="name">${itemKey}</div>
                                                <div class="content">${item[itemKey]}</div>
                                            </li>`;
                        }
                    }
                });
            }
            switcEmptyTip(false);
            panelDom.find("li:not(.empty-tip)").remove(); // 刪除舊數據
            panelDom.append($(renderHtml)); // 渲染數據
        });
}

第三步 初始化重點區域監控功能

加載完模型後初始化重點區域監控功能

// 初始化重點區域監控功能
function initAreaMonitor() {
    bindBtnEvent();
}

第四步 初始化熱力分佈功能

加載完模型後初始化熱力分佈功能

// 初始化熱力分佈功能
function initHeatDistribution() {
    getTreeLocationData();
}

下載完整代碼

相關接口

model.on(‘load’)
view.setSceneBackground
component.on(“click”)
component.hide
component.show
toolbar.on(“home:click”)

相關示例

智慧屏幕中的能耗數據展示如何實現？