如何用webgl(three.js)搭建不規則建築模型，客流量熱力圖模拟

本節課主要講解如何用webgl(three.js)搭建一個建築模型，客流量熱力圖模拟

使用技術說明：

　　這裡主要用到了three.js，echart.js以及一些其它的js 與css技術，利用websoket做實時資料傳輸。

技術亮點：

　　用代碼實作不規則建築三維模型，模型層疊動畫、三維會話氣泡等

　　實時繪制三維熱力雲圖

　　三維場景内外連線技術

　　有效控制頁面記憶體，及時回收繪畫記憶體，防止記憶體洩漏。

項目前序：

客流量控制是大型公共場所把控安全的重要節點，實時把控各個部位的客流數量，對安全引導，緊急疏散、熱門區域檢視、商業規劃起到很重要的作用。

首先 我們先在網上找兩張國家會展中心的外景宏觀圖與内部結構圖

圖一：這是國家會展中心的外部宏觀圖，四葉草的外觀（寓意繁榮詩意 “四葉草” 金秋盛情迎賓朋）（這張圖來自網絡，解釋權歸原作者所有）

圖二：這是内部場館宏觀圖（這張圖來自網絡，解釋權歸原作者所有）

界面效果：

a、首頁展示場館的3D模型總體态勢，總人數，各個場館實時客流，來源，年齡分析分類，以及各場館客流量同比異常分析

b、單擊單個場館熱力詳情，進去單個場館實時客流界面，分析場館内客流分布于統計情況

c、點選全屏，全屏展示總然模型，輕按兩下單個場館模型，進入單個場館模型詳細展示區

d、點選樓層選擇，分解樓層，顯示樓層内的實時客流分布情況

e、點選客流範圍選擇，篩選出範圍内的客流區域，有效導航引導客流分布，以及檢視熱點分布

重要代碼實作

　　一、模型代碼，用js代碼實作模型，而非導入模型檔案，有效控制檔案大小，提示加載渲染速度

　　　　

View Code

　　

　　二、界面搭建代碼

　　三、邏輯控制代碼

　

　　四、接口對接代碼

function ServerAPI() {
    //websocket接口
    this.webSocketUrl = "ws://xxx/monitoring/plaWebSocket";
    this.restFulUrl = "xxx";
    
}
ServerAPI.prototype.startServer = function () {
    var _this = this;
    startWebsocket(_this.webSocketUrl);
}
ServerAPI.prototype.getData = function () {

}



/*
*
*/
//擷取擷取所有場館實時資料
ServerAPI.prototype.getAllRoomData = function (room,suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "headMap?room=" + room;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
//擷取場館的預警值
/*
http://118.24.33.58:8080/monitoring/pla/personNumWarn
參數:url?room={0}
*/
ServerAPI.prototype.getAlarmData = function (room, suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "personNumWarn?room=" + room;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
/**
 * 曆史人流量資料接口
 */


/*
場館來源地統計接口
*/
/*
性别比例資料查詢統計接口
*/
/*
APP排名統計接口
*/
ServerAPI.prototype.getAppData = function (room, suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "personNumWarn?room=" + room;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
/**
年齡分布接口
*/
ServerAPI.prototype.getAgesData = function (room, starttime,suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "agesStatic?room=" + room + "&startTime=" + starttime;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
var serverAPI = null;      

技術交流郵箱 有不足之處，還望指正：

　　　　[email protected]

 　　交流微信：

其它交流文章

使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模拟，web版3D,bim管理系統——第四課 使用webgl(three.js)搭建一個3D建築，3D消防模拟——第三課 如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課 如何用webgl(three.js)搭建一個3D庫房-第一課