使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模拟，web版3D,bim管理系統——第四課

3d建築,3d消防,消防演習模拟,3d庫房,3d檔案室,3d密集架,webGL,threejs,3d機房,bim管理系統

序：這段時間忙于奔波，好久沒有更新了，今天更新一下，繼續上節課的完善講解，算是對前段時間的一個總結吧。披星戴月的時光也算有點應用效果了。

　　對于webgl(three.js)性能這一塊我在上節課《使用webgl(three.js)搭建一個3D建築，3D消防模拟——第三課》已經給了詳細的說明比較與解決方案

　　下節課講解了炫酷科技版本的解決方案

　　

本節概要：

　　　　繼上節課我們說的消防相關的操控模拟，本節課我們繼續講解用three.js建立大場景模拟與實作

　　　　本節課我們主要實作一個園區的消防三維模拟，3D消防監控

行業前景：

　　　　消防問題向來刻不容緩，消防監控，防患于未然，是社會财富保障的第一戰，第一道有效防護線，目前的監控手段有很多，實時視訊、煙感、噴淋、消防泵、消防關聯是目前最主流以及最有效的消防監控手段。

　　　　但如何把這些裝置直覺的展現，實作全局布控，遠端指揮，那就需要最直覺的展示系統，是以3D消防操控系統在這裡就發揮了及其重要的作用。

功能概述：

　　　　1、園區整體3D布局展示，直覺掌控園區重點布局。

　　　　2、視角切換體驗。第一人稱巡檢，切身熟悉路徑通道。

　　　　3、大樓切面圖 消防管道 消防裝置布局3D展示，精準把握消防布控。

　　　　4、樓層三維展示、消防裝置布局展示，逃生路徑規劃

　　　　5、消防局3D模拟 監控室監控模拟

　　　　6、消防員以及相關動作模拟

　　　　7、消防車模拟、路徑規劃導航模拟、消防車噴水模拟

　　　　8、室内滅火模拟

　　　　9、消防傳感器告警關聯

　　　　10、裝置巡檢。實時檢測裝置狀況。

　　　　11、裝置遠端控制與實時視訊監控

技術難點：

　　　　1、浏覽器大場景加載與渲染

　　　　　　解決方案：大量使用代碼模型，把最終所有模型總和控制在1M以内

　　　　　　　　　　  算法重構，避開浏覽器繪圖瓶頸

　　　　2、模型平滑切換

　　　　　　解決方案：邏輯數組+補間+按需加載

　　　　3、各主體動畫

　　　　　　解決方案：js模拟多線程+邏輯自控js腳本+按需渲染

　　　　4、接口資料接入（資料對接是最耗時間的）

　　　　　　解決方案：實時資料接入與展示我采用的restFul+cache+websocket方式保障資料的完整性、實時性。

　　　　5、無插件實時視訊調用

　　　　　　技術背景：目前主流的實時視訊監控方式是使用用戶端、或者用浏覽器插件方式（flash插件或者其它），但由于各大浏覽器宣布不再支援flash，adobe後期不再更新支援flash，以及其它插件也不能支援所有浏覽器。

　　　　　　技術需求：無插件實時視訊監控，浏覽器打開就能看實時視訊，不用插件

　　　　　　解決方案：

　　　　　　　　　　方案一、websocket+媒體服務

　　　　　　　　　　　　　　優點：無插件、資料實時、基本無延時

　　　　　　　　　　　　　　個人目前實作的缺點：目前隻能支援硬解264的視訊，但264的網絡帶寬占用高， 265的隻能做到軟解、多路視訊支援效果不好。

　　　　　　　　　　方案二、HLS+媒體伺服器

　　　　　　　　　　　　　　優點：無插件、資料實時

　　　　　　　　　　　　　　缺點：延時較大，目前也隻能支援264硬解、265軟解

　　　　　　　上述兩種方案後面會寫文章具體介紹技術實作。

技術交流 [email protected]

交流微信：

　　　　

如果你有什麼要交流的心得 可郵件我

效果展示與實作：

　　　　A、整體場景

View Code

B、檢視大樓整體布局

模型實作：

C、檢視樓層布局

D、消防大樓 監控室模拟

E、火情告警模拟

F、救援路徑導航

G、火情救援

H、内部火情模拟

I、内部擷取救援

J、第一人稱視角切換

k、錄影機調用

代碼實作：

邏輯功能實作

第一人稱視角

 這一課先介紹到這裡 

後面我将繼續講解用webgl 建立 3D機房 3D園區 3D智慧小區 3D工程等等