天天看点

使用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消防模拟——第三课

继续阅读