使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课

序：这段时间忙于奔波，好久没有更新了，今天更新一下，继续上节课的完善讲解，算是对前段时间的一个总结吧。披星戴月的时光也算有点应用效果了。

　　对于webgl(three.js)性能这一块我在上节课《使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课》已经给了详细的说明比较与解决方案

　　技术交流邮箱1203193731@qq.com

本节概要：

　　　　继上节课我们说的消防相关的操控模拟，本节课我们继续讲解用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软解

　　　　　　　上述两种方案后面会写文章具体介绍技术实现。

技术交流邮箱1203193731@qq.com

效果展示与实现：

　　　　A、整体场景