随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中，尤其是高清时代的来临，更加快了网络摄像机的发展和应用。
在监控摄像机数量的不断庞大的同时，在监控系统中面临着严峻的现状问题：海量视频分散、孤立、视角不完整、位置不明确等问题，始终围绕着使用者。因此，如何更直观、更明确的管理摄像机和掌控视频动态，已成为提升视频应用价值的重要话题。所以当前项目正是从解决此现状问题的角度，应运而生。围绕如何提高、管理和有效利用前端设备采集的海量信息为公共安全服务，特别是在技术融合大趋势下，如何结合当前先进的视频融合，虚实融合、三维动态等技术，实现三维场景实时动态可视化监控，更有效的识别、分析、挖掘海量数据的有效信息服务公共应用，已成为视频监控平台可视化发展的趋势和方向。目前，在监控行业中，海康、大华等做监控行业领导者可基于这样的方式规划公共场所园区等的摄像头规划安放布局，可以通过海康、大华等摄像头品牌的摄像头参数，调整系统中摄像头模型的可视范围，监控方向等，更方便的让人们直观的了解摄像头的监控区域，监控角度等。
以下是项目地址：基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型
效果预览
整体场景-摄像头效果图
实时生成效果图：
项目中使用的摄像头模型是通过 3dMax 建模生成的，该建模工具可以导出 obj 与 mtl 文件，在 HT 中可以通过解析 obj 与 mtl 文件来生成 3d 场景中的摄像头模型。
项目中场景通过 HT 的 3d 编辑器进行搭建，场景中的模型有些是通过 HT 建模，有些通过 3dMax 建模，之后导入 HT 中，场景中的地面白色的灯光，是通过 HT 的 3d 编辑器进行地面贴图呈现出来的效果。
锥体建模3D 模型是由最基础的三角形面拼接合成，例如 1 个矩形可以由 2 个三角形构成，1 个立方体由 6 个面即 12 个三角形构成， 以此类推更复杂的模型可以由许多的小三角形组合合成。因此 3D 模型定义即为对构造模型的所有三角形的描述， 而每个三角形由三个顶点 vertex 构成， 每个顶点 vertex 由 x, y, z 三维空间坐标决定，HT 采用右手螺旋定则来确定三个顶点构造三角形面的正面。
HT 中通过 ht.Default.setShape3dModel(name, model) 函数，可注册自定义 3D 模型，摄像头前方生成的锥体便是通过该方法生成。可以将该锥体看成由 5 个顶点，6 个三角形组成，具体图如下：
ht.Default.setShape3dModel(name, model)
1. name 为模型名称，如果名称与预定义的一样，则会替换预定义的模型
2. model 为JSON类型对象，其中 vs 表示顶点坐标数组，is 表示索引数组，uv 表示贴图坐标数组，如果想要单独定义某个面，可以通过 bottom_vs，bottom_is，bottom_uv，top_vs，top_is， top_uv 等来定义，之后便可以通过shape3d.top.*， shape3d.bottom.* 等单独控制某个面
以下是我定义模型的代码:
// camera 是当前的摄像头图元 // fovy 为摄像头的张角的一半的 tan 值 var setRangeModel = function(camera, fovy) { var fovyVal = 0.5 * fovy; var pointArr = [0, 0, 0, -fovyVal, fovyVal, 0.5, fovyVal, fovyVal, 0.5, fovyVal, -fovyVal, 0.5, -fovyVal, -fovyVal, 0.5]; ht.Default.setShape3dModel(camera.getTag(), [{ vs: pointArr, is: [2, 1, 0, 4, 1, 0, 4, 3, 0, 3, 2, 0], from_vs: pointArr.slice(3, 15), from_is: [3, 1, 0, 3, 2, 1], from_uv: [0, 0, 1, 0, 1, 1, 0, 1] }]); }