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

3D建築,bim技術,3d庫房,3d檔案室,3d密集架,webGL,threejs,3d機房 ...

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

使用技術說明：

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

技術亮點：

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

　　實時繪製三維熱力雲圖

　　三維場景內外連線技術

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

硬體技術：

　　利用 wifi探針 AI人臉識別技術有效統計各個區域的客流量，清洗重覆數據，提升統計算力

三維數據可視化執行的意義：

　　　　為什麼需要可視化展示，我總結如下幾點：

　　　　a、實用性：直觀快速的展示數據，提示告警，快速定位問題，為解決問題節省大量時間，

　　　　b、成本管理：成本對於企業來講是至關重要的，三維可視化可以為高層領導者，執行者提供最快捷的管理方案

　　　　c、去專業化：本著代碼改變世界的願望，可視化操控就是為了讓更多人的能夠看懂、操作所謂專業的東西，

　　　　d、科技：越是科技的東西，越需要直觀的展示，越是複雜的東西越需要簡單的描述。可視化恰恰解決了這個痛點。

　　　　e、體面：企業的數據大屏是企業的形象，三維可視化可快速提示企業高大上的企業形象，向客戶展示企業的實力與精緻，

　　　　d、輕便：這是技術的實現方式，使用電腦瀏覽器或者手機瀏覽器直接查看三維機房，方便快捷

項目前序：

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

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

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

圖二：這是內部場館巨集觀圖（這張圖來自網路，解釋權歸原作者所有）

界面效果：

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

國家會展中心實時客流監控

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

國家會展中心實時客流監控

c、點擊全屏，全屏展示總然模型，雙擊單個場館模型，進入單個場館模型詳細展示區國家會展中心實時客流監控

d、點擊樓層選擇，分解樓層，顯示樓層內的實時客流分佈情況

國家會展中心實時客流監控

e、點擊客流範圍選擇，篩選出範圍內的客流區域，有效導航引導客流分佈，以及查看熱點分佈國家會展中心實時客流監控

重要代碼實現

　　一、模型代碼，用js代碼實現模型，而非導入模型文件，有效控制文件大小，提示載入渲染速度

[{ "show": true, "uuid": "", "name": "m4_base", "objType": "ExtrudeGeometry", "position": { "x": -3479.388, "y": -1010, "z": -331.275 }, "style": { "skinColor": 14283263, "side": 0, "materialType": "lambert", "opacity": 0.1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": -10, "y": 0, "type": "nomal" }, { "x": -10, "y": 1150, "type": "nomal" }, { "x": -10, "y": 1150, "type": "bezier3" }, { "x": 100, "y": 1980, "type": "bezier3" }, { "x": 1200, "y": 1960, "type": "bezier3" }, { "x": 4260, "y": 1960, "type": "nomal" }, { "x": 4260, "y": 1960, "type": "bezier3" }, { "x": 4950, "y": 1960, "type": "bezier3" }, { "x": 5250, "y": 1700, "type": "bezier3" }, { "x": 6470, "y": 500, "type": "nomal" }, { "x": 6470, "y": 500, "type": "bezier3" }, { "x": 6550, "y": 400, "type": "bezier3" }, { "x": 6550, "y": 300, "type": "bezier3" }, { "x": 6550, "y": -1150, "type": "nomal" }, { "x": 6550, "y": -1150, "type": "bezier3" }, { "x": 6480, "y": -1550, "type": "bezier3" }, { "x": 6100, "y": -1520, "type": "bezier3" }, { "x": 320, "y": -1520, "type": "nomal" }, { "x": 320, "y": -1520, "type": "bezier3" }, { "x": 50, "y": -1450, "type": "bezier3" }, { "x": -10, "y": -1150, "type": "bezier3" }, { "x": -10, "y": -1150, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 1, "curveSegments": 16, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1", "objType": "GroupObj", "scale": { "x": 1, "y": 1, "z": 1 }, "position": { "x": 0, "y": -1000, "z": 0 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "childrens": [{ "show": true, "uuid": "", "name": "m4_floor_1OBJCREN0", "objType": "DirectionalLight", "shadowCameraNear": 1, "shadowCameraFar": 5000, "shadowCameraLeft": -500, "shadowCameraRight": 500, "shadowCameraTop": 500, "shadowCameraBottom": -500, "shadowMapWidth": 1024, "shadowMapHeight": 1024, "distance": 5000, "targetName": "floor", "intensity": 1, "color": 5592405, "castShadow": true, "position": { "x": 100, "y": 1662.18, "z": 100 }, "showSortNub": 6, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "shadowCameraFov": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN1", "objType": "ExtrudeGeometry", "position": { "x": -3195.41, "y": 0, "z": 0 }, "style": { "skinColor": 668528, "opacity": 0.9 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 0, "y": 1170, "type": "nomal" }, { "x": 188, "y": 1358, "type": "nomal" }, { "x": 4758, "y": 1358, "type": "nomal" }, { "x": 6010, "y": 110, "type": "nomal" }, { "x": 6010, "y": -290, "type": "nomal" }, { "x": 6420, "y": -290, "type": "nomal" }, { "x": 6420, "y": -1600, "type": "nomal" }, { "x": 125, "y": -1600, "type": "nomal" }, { "x": 0, "y": -1480, "type": "nomal" }, { "x": 0, "y": 0, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 1, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948963 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN2", "objType": "cube2", "length": 40, "width": 40, "height": 200, "x": -3051.193, "y": 100, "z": -91.682, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_behind": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_left": { "skinColor": 13233151, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 13233151, "side": 1, "opacity": 0.3 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN3", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": 1960.245, "y": 100, "z": -1604.769, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN4", "objType": "cube2", "length": 1050, "width": 6, "height": 200, "x": -3196.004, "y": 100, "z": 643.95, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 13, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 13, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 1.5707963267948966 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN5", "objType": "cube2", "length": 1650, "width": 6, "height": 200, "x": -2182.602, "y": 100, "z": 1354.415, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN6", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": -120.012, "y": 100, "z": 1354.415, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN7", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": -125.017, "y": 100, "z": -1604.769, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN8", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": -120.012, "y": 100, "z": 1144.523, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN9", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": -125.017, "y": 100, "z": -1321.688, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN10", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": 1960.245, "y": 100, "z": -1318.679, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }

View Code

[{ "show": true, "uuid": "", "name": "m1_floor1_6", "objType": "ExtrudeGeometry", "position": { "x": -2900, "y": 0, "z": 0 }, "style": { "skinColor": 2322370, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 32, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 1.5707963267948966 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_5", "objType": "ExtrudeGeometry", "position": { "x": -2900, "y": 10, "z": 0 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 1.5707963267948966 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_3", "objType": "ExtrudeGeometry", "position": { "x": 2900, "y": 0, "z": 0 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": -1.5707963267948966 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_4", "objType": "ExtrudeGeometry", "position": { "x": 2900, "y": 10, "z": 0 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": -1.5707963267948966 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_7", "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 0, "z": -2900 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_8", "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 10, "z": -2900 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": -3.141592653589793 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_6_copy", "objType": "ExtrudeGeometry", "position": { "x": -2900, "y": 0, "z": 0 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 32, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 1.5707963267948966 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_1", "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 0, "z": 2900 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": -3.141592653589793 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_2", "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 10, "z": 2900 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }]

View Code

　　二、界面搭建代碼

<!DOCTYPE html>
<html style="padding:0px;margin:0px;">
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="../css/iconfont.css" rel="stylesheet" />
    <link href="../css/bootstrap.css" rel="stylesheet" />
    <link href="../css/index.css" rel="stylesheet" />
    <script src="../js/jquery-2.2.2.js"></script>
    <script src="../plugs/layer/layer.js"></script>
    <script src="../plugs/layer/laydate/laydate.js"></script>
    <script src="../js/commonFunction.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/WebSocket.js"></script>
    <script src="../js/index_static.js"></script>
    <script src="../js/cacheData.js"></script>
    <script src="../js/serverAPI.js"></script>
    <script src="../plugs/echarts.min.js"></script>
</head>
<body id="bodyPage" style="padding:0px;margin:0px;" class="indexbody">
    <!---主頁---------------------->
    <div id="indexMainPage">


        <div id="mainHeadDiv">
            <table>
                <tr id="mainHeadDiv_thead1">
                    <td id="mainHeadDiv_thead1_td_1">國家會展中心實時客流監控系統</td>
                    <td id="mainHeadDiv_thead1_td_2">場館實時客流圖</td>
                    <td id="mainHeadDiv_thead1_td_3">0000年00月00日 星期日 00:00:00</td>
                </tr>
            </table>
        </div>
        <div id="topTitle">
            <table>
                <tr>
                    <td id="topTitle_td1">場館當前人數</td>
                    <td id="topTitle_td2">
                        <span>0</span>
                        <span>0</span>
                        <font>,</font>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>
                        <font>,</font>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>
                        <font>,</font>
                        <span>0</span>
                        <span>0</span>
                        <span>0</span>

                    </td>
                </tr>
            </table>
        </div>
        <div id="leftMainDiv_ztts">
            <div id="divFullScreenBtn">
                全屏
            </div>
            <div id="leftMainDiv_ztts_bottom_staticDiv">
                <table style="width:100%;height:100%;">
                    <tr>
                        <td id="leftMainDiv_ztts_bottom_staticDiv_btns">
                            <button>昨天</button>
                            <button>今日</button>
                            <button>全部</button>
                        </td>
                        <td id="leftMainDiv_ztts_bottom_staticDiv_content1"></td>
                        <td id="leftMainDiv_ztts_bottom_staticDiv_split"></td>
                        <td id="leftMainDiv_ztts_bottom_staticDiv_content2"></td>
                    </tr>
                </table>
            </div>
            <div id="leftMainDiv_ztts_rightTop_staticDiv">
                <table id="leftMainDiv_ztts_rightTop_staticDivTable" style="width:90%;">
                    <tr>
                        <td style="width:50%" id="td_pnub_1"><font >1H</font>:<font>0</font>人</td>
                        <td id="td_pnub_6_1"><font>6.1H</font>:<font>0</font>人</td>
                    </tr>
                    <tr>
                        <td id="td_pnub_2"><font>2H</font>:<font>0</font>人</td>
                        <td id="td_pnub_6_2"><font>6.2H</font>:<font>0</font>人</td>
                    </tr>
                    <tr>
                        <td id="td_pnub_3"><font >3H</font>:<font>0</font>人</td>
                        <td id="td_pnub_7_1"><font >7.1H</font>:<font>0</font>人</td>
                    </tr>
                    <tr>
                        <td id="td_pnub_4_1"><font >4.1H</font>:<font>0</font>人</td>
                        <td id="td_pnub_7_2"><font>7.2H</font>:<font>0</font>人</td>
                    </tr>
                    <tr>
                        <td id="td_pnub_4_2"><font >4.2H</font>:<font>0</font>人</td>
                        <td id="td_pnub_8_1"><font >8.1H</font>:<font>0</font>人</td>
                    </tr>
                    <tr>
                        <td id="td_pnub_5_1"><font >5.1H</font>:<font>0</font>人</td>
                        <td id="td_pnub_8_2"><font>8.2H</font>:<font>0</font>人</td>
                    </tr>
                    <tr>
                        <td id="td_pnub_5_2"><font >5.2H</font>:<font>0</font>人</td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div id="leftMainDiv_ztts_rightBottom_staticDiv">
                <div id="leftMainDiv_ztts_rightBottom_staticDivContent">
                 
                </div>
            </div>
            <div id="leftMainDiv_ztts_msg">
                <font id="leftMainDiv_ztts_msg_font1">
                    場館當前正常
                </font>
                    <br />
                    <font id="leftMainDiv_ztts_msg_font2">點擊查看詳情</font>
</div>

        </div>
        <div id="rightMainDiv">
            <div id="rightMainDiv_ssklsh">
                <div id="rightMainDiv_ssklshContent">

                </div>
            </div>
            <div id="rightMainDiv_klsjfx">
                <div id="rightMainDiv_klsjfxContent">
                    <table style="width:100%;height:100%;">
                        <tr>
                            <td style="width:70%;height:50%;">
                                <div id="rightMainDiv_klsjfxContent_1">
                                    <table style="height:100%;width:100%;">
                                        <tr>
                                            <td  id="rightMainDiv_klsjfxContent_1_title">來源</td>
                                            <td id="rightMainDiv_klsjfxContent_1_chart"></td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                            <td rowspan="2">
                                <div id="rightMainDiv_klsjfxContent_2">
                                    <table style="height:100%;width:100%;">
                                        <tr>
                                            <td id="rightMainDiv_klsjfxContent_2_title">性別</td>
                                        </tr>
                                        <tr>
                                            <td id="rightMainDiv_klsjfxContent_2_chart"></td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                        <tr>
                        <td><div id="rightMainDiv_klsjfxContent_3">
    <table style="height:100%;width:100%;">
        <tr>
            <td id="rightMainDiv_klsjfxContent_3_title">年齡</td>
            <td id="rightMainDiv_klsjfxContent_3_chart"></td>
        </tr>
    </table>
</div></td>
                        </tr>
                    </table>
                  
                    
                </div>
            </div>
        </div>
    </div>
    <!---主頁結束---------------------->
    <iframe id="iframe_3d" src="3DModels.html">
       
    </iframe>
    <!---樓層---------------------->
    <div id="indexFloorPage" style="display:none;">

        <div id="mainHeadDiv2">
            <table>
                <tr id="mainHeadDiv2_thead1">
                    <td id="mainHeadDiv2_thead1_td_1">
                        國家會展中心實時客流監控系統</br>
                        <font id="mainHeadDiv2_thead1_td_font">0000年00月00日 星期日 00:00:00</font>
                    </td>
                    <td id="mainHeadDiv2_thead1_td_2">場館實時客流圖</td>
                    <td id="mainHeadDiv2_thead1_td_3">四號館實時在館人數:4555</td>
                </tr>
            </table>
        </div>

        <div id="btn_left">
            <div class="btn_floor" id="btn_floor1">
                <img src="../img/pageImg/floorbtn.png" /><font>一樓</font>
            </div>
            <div class="btn_floor" id="btn_floor2">
                <img src="../img/pageImg/floorbtn.png" /><font>二樓</font>
            </div>
            <div class="btn_floor" id="btn_floorAll">
                <img src="../img/pageImg/floorbtn.png" /> <font>整樓</font>
            </div>
        </div>

        <div id="btn_right">

            <div class="btn_people" id="btn_p30">
                <font>30-45</font><img src="../img/pageImg/floorPeople.png" />
            </div>
            <div class="btn_people" id="btn_p20">
                <font>20-35</font><img src="../img/pageImg/floorPeople.png" />
            </div>
            <div class="btn_people" id="btn_p10">
                <font>10-25</font><img src="../img/pageImg/floorPeople.png" />
            </div>
            <div class="btn_people" id="btn_p0">
                <font>0-15</font><img src="../img/pageImg/floorPeople.png" />
            </div>
        </div>
    </div>
    <!---樓層結束---------------------->
    <!---統計詳情---------------------->
    <div id="indexStaticPage" style="display:none;">
        <div id="mainHeadDiv3">
            <table>
                <tr id="mainHeadDiv3_thead1">
                    <td id="mainHeadDiv3_thead1_td_1">
                        國家會展中心實時客流監控系統</br>
                        <font id="mainHeadDiv3_thead1_td_font">0000年00月00日 星期日 00:00:00</font>
                    </td>
                    <td id="mainHeadDiv3_thead1_td_2">場館實時客流圖</td>
                    <td id="mainHeadDiv3_thead1_td_3">實時在館總人數:4555</td>
                </tr>
            </table>
        </div>
        <div id="staticPageMain_content">
            <div id="staticPage_topHalf">
                <div id="staticWhereFromDiv">
                    <div id="staticWhereFromDivContent">
                        <div id="staticWhereFromDivContentTitle">
                            場館來源地
                        </div>
                        <div id="staticWhereFromDivContentChart">

                        </div>
                    </div>
                </div>
                <div id="staticMainDiv">
                    <div id="staticMainDivContent">
                        <div id="staticMainDivContent_hitMap">

                        </div>
                        <div id="staticMainDivContent_hitMapBtn">
                            <div id="staticMainDivContent_hitMapBtnSpan">&nbsp;&nbsp;</div>
                            <font id="staticMainDivContent_hitMapBtnfont">熱力圖</font>
                        </div>
                    </div>
                </div>
                <div id="staticAppDiv">

                    <div id="staticAppDivContent">
                        <div id="staticAppDivContentTitle">
                            APP排名
                        </div>
                        <div id="staticAppDivContentChart">

                        </div>
                    </div>
                </div>
            </div>
            <div id="staticPage_bottomHalf">
                <div id="staticAgeDiv">
                    <div id="staticAgeDivContent">
                        <div id="staticAgeDivContentTitle">
                            年齡分佈
                        </div>
                        <div id="staticAgeDivContentChart">

                        </div>
                    </div>
                </div>
                <div id="staticRealPeopleDiv">
                    <div id="staticRealPeopleDivContent">
                        <div id="staticRealPeopleDivContentTitle">
                            4.1H實時客流趨勢圖
                        </div>
                        <div id="staticRealPeopleDivContentChart">

                        </div>
                    </div>
                </div>
                <div id="staticHistorySexDiv">

                    <div id="staticHistorySexDivContent">
                       <div id="staticHistorySexDivContentTitle">
                           男女比例
                        </div>
                        <div id="staticHistorySexDivContentChart">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!---home鍵---------------------->
    <div id="homeBtn">

    </div>
    <!---home END---------------------->
    <!---統計結束---------------------->

    <script>
        $(function () {
            indexPage = new IndexPage();
            indexPage.initPageUI();
            cacheData = new CacheData();
            cacheData.init();
            serverAPI = new ServerAPI();
            serverAPI.startServer();
        });
    </script>
</body>
</html>

View Code

　　三、邏輯控制代碼

  1 function ModelBusiness() { }
  2 ModelBusiness.prototype.init = function () {
  3     var _this = this;
  4     _this.currentShow = "mainModel";
  5     w3DShowObj.mouseMoveEvent = _this.mouseMoveEvent;
  6 }
  7 //雙擊事件
  8 ModelBusiness.prototype.dbclickForeFunc = function (_obj, _face) {
  9     var _this = this;
 10     if (indexPage.currentShow != "main") {
 11 
 12         if ("|m1_room_4_1|m1_room_4_2|m1_mark_4_1|m1_mark_4_2|m1_hitmap_b4_f2|m1_hitmap_b4_f1|".indexOf("|" + _obj.name + "|") >= 0) {
 13             this.changeToDetailModel(function () {
 14                 indexPage.showLeftAndRightBottons();
 15             });
 16         } else {
 17             console.log(_obj.name);
 18             if (_obj.name.indexOf("m1_") >= 0) {
 19                 layer.msg("選中的場館無對應模型");
 20             }
 21         }
 22     } else {
 23         console.log(_obj.name);
 24         indexPage.hideDetailBtn();
 25         //顯示熱力圖
 26         if (_obj.name.indexOf("m1_room_") >= 0 || _obj.name.indexOf("m1_mark_") >= 0) {
 27             var buildbub = parseInt(_obj.name.split("_")[2]);
 28             var floorNub = 0;
 29             if (_obj.name.split("_")[3]) {
 30                 floorNub = parseInt(_obj.name.split("_")[3]);
 31             }
 32             //此處獲取熱力圖數據
 33             _this.gethitMapData(buildbub, floorNub, function (data) {
 34                 var postion = _this.hitMapToABPosition["h" + buildbub];
 35                 var roomname = "m1_room_" + buildbub + "_" + floorNub;
 36                 if (floorNub == 0) {
 37                     roomname = "m1_room_" + buildbub;
 38                 }
 39                 var room = w3DShowObj.commonFunc.findObject(roomname);
 40                 var position = {};
 41                 position.x = room.position.x + postion.x;
 42                position.y = room.position.y + postion.y+10;
 43                position.z = room.position.z + postion.z;
 44                var pageposition = indexPage.getMSGPositionToIframe();
 45                var p = new THREE.Vector3(pageposition.x, pageposition.y, -1).unproject(w3DShowObj.camera)
 46                _this.addLinkLine(position, p);
 47                indexPage.showDetailBtn();
 48            _this.setHeatMap(buildbub, floorNub, data, function (hitmapobj) {
 49                     hitmapobj.visible = true