消防安全一直是各大都市关注的重要课题，在消防体系中，特别是高楼消防体系中，消防系统整体布控与监控，火情有效准确定位，防火器材定位，人员逃生路径规划，火情预警，消防演习都是特别重要的环节。所以一套直观的，迅速治控的系统展现，可体验式演戏游戏也就变得那么的不可或缺了。
解决方案
技术选型：使用webGL技术，无插件无安装方案。创建三维建筑消防模拟
在模型的建模方案选择上有两种方式：
1、使用建模工具（3dmax、autocad、blender等等）创建模型
优点：模型搭建速度快，开发周期短
缺点：模型大，加载渲染速度慢，影响用户体验
2、使用纯代码实现模型场景
优点：代码实现，加载渲染速度指数级提升，基本感受不到等待时间，用户体验好。
缺点：开发工作大，代码实现的时间长。
基于上述比较，我们选中的方案是两者兼用，在按需加载的模型上使用建模工具建模，在后端偷偷加载，无用户等待时间。在直观场景上使用代码实现，给用户最好的体验。
闲话少叙，我们接着前两集课(， ）继续做WebGL实现3D模拟，
有什么需要交流的 可邮件我 1203193731@qq.com
特此说明：为了减少网络传输带宽 我特意用ScreenToGif工具 截了一些gif图 压缩成低帧率
功能展示与代码实现分享
下面主要展示一些已实现的功能，后面继续完成消防演习的游戏部分。
一、点击地图上的模拟地点，进入3D模拟环境
代码实现部分
<!DOCTYPE html> <html style="padding:0px;margin:0px;"> <head> <style> .canvas_frame { border: none; cursor: pointer; width: 100%; height: 100%; background-color:rgba(0, 0, 0, 0); overflow: hidden; } .toolbar { display: block; position: absolute; left: 10px; top: 75px; width: 32px; height: auto; background:rgba(115, 95, 34, 0.4); border-radius: 5px; padding: 5px; } .toolbar img { float: left; margin: 5px; width: 24px; height: 24px; pointer-events: auto; cursor: pointer; } .Stats_output { display: block; position: absolute; border-radius: 5px; padding: 5px; } </style> <title></title> <meta charset="utf-8" /> <script src="/js/jquery-2.2.2.js"></script> <script src="/js/commonFunction.js"></script> <script src="../js/tlasdf653sdagtysdfg5/c354fasdftsdaftsrfd.js"></script> <script src="/js/tlasdf653sdagtysdfg5/ctbsp45fads45fasd65f4.js"></script> <script src="/js/tlasdf653sdagtysdfg5/ctweendsafty578asd234g5.js"></script> <script src="/js/tlasdf653sdagtysdfg5/cde524fsdate.js"></script> <script src="/js/tlasdf653sdagtysdfg5/ctrasdfsdaf5274dsf455.js"></script> <script src="/js/tlasdf653sdagtysdfg5/ctstats5gd5dfshtg36sd2f146.min.js"></script> <script src="../js/tlasdf653sdagtysdfg5/t354sdfsa3df54gasdf354.js"></script> <script src="../js/tlasdf653sdagtysdfg5/t63854fdsadsf354.js"></script> <script src="../js/tlasdf653sdagtysdfg5/t354afsdasdg335.js"></script> <script src="../js/tlasdf653sdagtysdfg5/itsadfnysdfa5dsfadsaf5t45ygv.js"></script> <script src="/libs/layer/layer.js"></script> </head> <body onload="threeStart(0);" style="padding:0px;margin:0px;"> <script> if (!Detector.webgl) { layer.alert("您的浏览器不支持3D功能,请使用支持WebGL的浏览器（例如：chrome浏览器、ie11以上浏览器等）"); } </script> <div id="dataCanvasList" style="position:absolute;z-index:-1;display:none;width:5px;height:5px;overflow:hidden;"><div style="width:10px;height:10px;float:left;position:relative;"></div></div> <div id="canvas-frame" class="canvas_frame"></div> <div id="htmapdiv" style="display:none;"> <img src="../img/htmap.jpg" usemap="#htmapmap" /> <map name="htmapmap" id="htmapmap"> <area shape=rect coords=700,400,900,600 onclick="clickMap();" /> </map> </div> </body> </html>