天天看點

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

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

項目背景

 消防安全一直是各大都市關注的重要課題,在消防體系中,特别是高樓消防體系中,消防系統整體布控與監控,火情有效準确定位,防火器材定位,人員逃生路徑規劃,火情預警,消防演習都是特别重要的環節。是以一套直覺的,迅速治控的系統展現,可體驗式演戲遊戲也就變得那麼的不可或缺了。

解決方案

技術選型:使用webGL技術,無插件無安裝方案。建立三維建築消防模拟

在模型的模組化方案選擇上有兩種方式:

  1、使用模組化工具(3dmax、autocad、blender等等)建立模型

      優點:模型搭建速度快,開發周期短

      缺點:模型大,加載渲染速度慢,影響使用者體驗

   2、使用純代碼實作模型場景

      優點:代碼實作,加載渲染速度指數級提升,基本感受不到等待時間,使用者體驗好。

      缺點:開發工作大,代碼實作的時間長。

基于上述比較,我們選中的方案是兩者兼用,在按需加載的模型上使用模組化工具模組化,在後端偷偷加載,無使用者等待時間。在直覺場景上使用代碼實作,給使用者最好的體驗。

閑話少叙,我們接着前兩集課(http://www.cnblogs.com/yeyunfei/p/7899613.html,http://www.cnblogs.com/yeyunfei/p/8811228.html )繼續做WebGL實作3D模拟,

技術交流 [email protected]

交流微信:

    

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

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

特此說明:為了減少網絡傳輸帶寬 我特意用ScreenToGif工具 截了一些gif圖 壓縮成低幀率

 功能展示與代碼實作分享

  下面主要展示一些已實作的功能,後面繼續完成消防演習的遊戲部分。

一、點選地圖上的模拟地點,進入3D模拟環境

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

 代碼實作部分

二、模拟某一樓層火情定位

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

代碼實作:

 三、點選消防布線管理,顯示整體的消防管道布局情況與監控

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

 四、點選某個樓層進入樓層具體布局

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

 五、點選消防定位按鈕,顯示消防栓、滅火器等具體定位

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

 六、點選噴淋管道按鈕,顯示樓層的管道具體布局與監控

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

 七、模拟火情,定位以及逃生路徑

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

 八、模拟消防通風管道

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

 九、模拟消防裝置巡檢監控

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

 這一課先介紹到這裡 

後面我将繼續講解相關消防演習遊戲模拟的操作

用webgl 建立 3D機房 3D園區 3D智慧小區 3D工程等等

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

繼續閱讀