前言

随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中，尤其是高清时代的来临，更加快了网络摄像机的发展和应用。

在监控摄像机数量的不断庞大的同时，在监控系统中面临着严峻的现状问题：海量视频分散、孤立、视角不完整、位置不明确等问题，始终围绕着使用者。因此，如何更直观、更明确的管理摄像机和掌控视频动态，已成为提升视频应用价值的重要话题。所以当前项目正是从解决此现状问题的角度，应运而生。围绕如何提高、管理和有效利用前端设备采集的海量信息为公共安全服务，特别是在技术融合大趋势下，如何结合当前先进的视频融合，虚实融合、三维动态等技术，实现三维场景实时动态可视化监控，更有效的识别、分析、挖掘海量数据的有效信息服务公共应用，已成为视频监控平台可视化发展的趋势和方向。目前，在监控行业中，海康、大华等做监控行业领导者可基于这样的方式规划公共场所园区等的摄像头规划安放布局，可以通过海康、大华等摄像头品牌的摄像头参数，调整系统中摄像头模型的可视范围，监控方向等，更方便的让人们直观的了解摄像头的监控区域，监控角度等。

效果预览

整体场景-摄像头效果图

局部场景-摄像头效果图

代码生成

摄像头模型及场景

项目中使用的摄像头模型是通过 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]

}]);

}

我将当前摄像头的 tag 标签值作为模型的名称，tag 标签在 HT 中用于唯一标识一个图元，用户可以自定义 tag 的值。通过 pointArr 记录当前五面体的五个顶点坐标信息，代码中通过 from_vs, from_is, from_uv 单独构建五面体底面，底面用于显示当前摄像头呈现的图像。

代码中设置了锥体 style 对象的 wf.geometry 属性，通过该属性可以为锥体添加模型的线框，增强模型的立体效果，并且通过wf.color，wf.width 等参数调节线框的颜色，粗细等。

相关模型 style 属性的设置代码如下：

1 rangeNode.s({ 2     'shape3d': cameraName, 3     // 摄像头模型名称 4     'shape3d.color': 'rgba(52, 148, 252, 0.3)', 5     // 锥体模型颜色 6     'shape3d.reverse.flip': true, 7     // 锥体模型的反面是否显示正面的内容 8     'shape3d.light': false, 9     // 锥体模型是否受光线影响10     'shape3d.transparent': true,11     // 锥体模型是否透明12     '3d.movable': false,13     // 锥体模型是否可移动14     'wf.geometry': true // 是否显示锥体模型线框15 });

摄像头图像生成原理

透视投影

透视投影是为了获得接近真实三维物体的视觉效果而在二维的纸或者画布平面上绘图或者渲染的一种方法，它也称为透视图。 透视使得远的对象变小，近的对象变大，平行线会出现先交等更更接近人眼观察的视觉效果。

如上图所示，透视投影最终显示到屏幕上的内容只有截头锥体( View Frustum )部分的内容， 因此 Graph3dView 提供了 eye, center, up, far，near，fovy 和 aspect 参数来控制截头锥体的具体范围