1. 文章背景

我感觉我学的东西真是够杂够乱的，但是毕竟都是自己花时间做的东西，所以还是想记录一下。
老板最近给了个活，想让我们做一个小房间的可视化监控系统。什么叫做可视化呢？就是要显示这个房间的实景布局，而且还要能和场景中的物件进行交互。比方说，点击温湿度计，就要能显示当前的温湿度；点击摄像头，就要能显示当前的实时视频。
当时刚开始接这个活的时候，也是有点摸不着头脑的，而且想不通这种监控系统到底有什么实用价值——没有就没有吧，反正看起来听酷炫的。
现在已经把这部分做的差不多了。所以站在上帝视角再来审视这个问题，思路就非常清晰了。如果有遇到做相同工作的同学，应该能更快地入门了。尤其是将来老师再让我带师弟师妹做项目的时候，我就先甩给他们一套文章看看，免去许多口舌啊哈哈哈

2.文章脉络

这个系列，我计划分为如下几个部分：
1.三维交互技术介绍，3D中常用的术语以及Three.js的介绍，也就是本文
2.Three.js在3D交互中的基本用法，包括加载外部模型，处理点击事件等
3.Three.js在VR全景图中的应用，包括基本原理介绍，处理点击事件，场景切换等
4.实时视频监控方案的选择和应用，包括主流实时监控方案介绍，主流WEB视频观看的方案介绍，以及如何把这些方案融合到可视化监控系统中。
5.传感器数据的获取和显示

3.三维展示技术介绍

三维，或者说3D，我们早就在游戏里就知道这种东西了，笼统地来说，它把人置身于一个“现实”环境中——这里的双引号表达的意思很微妙：所谓现实，只是表达你可以和环境中的东西进行交互，比方说和NPC对话，或者捡起一块石头；而所谓不现实，则是表达了画面显示得实在太虚假了，达不到电脑屏幕之外真实世界的感觉。
我之所以把这一段放在正文的最前面，是要以上帝视角来介绍下面两种三维展示技术。一开始接这个活的时候，就是由于把下面两个混为一谈了，导致技术路线偏了，最终做出来的效果不是很好，而且工作量太大。

3.1 基于3D模型的展示

这种模式的展示/交互，都是基于一个个3D模型来进行的。拿我们熟知的游戏来说，NPC就是一个3D模型，我们只要点击到NPC身体的任何一个部分，就会触发和这个NPC的一次交互。我们也可以想象，在某个打怪地图中，首先会有一个基本的地形模型，有山脉的起伏之类的，在这个地形之上，有很多树的模型、草的模型，还有很多怪物的模型在指定区域随机运动。
基于3D模型的展示有什么好处呢？拿游戏来说，每个模型都是独立的，如果我的游戏更新了，地图里要有一个新的NPC，那我只要做一个新的NPC模型，再把它放到场景中就好了。而且由于模型是独立的，我的模型还可以自由运动，可以做到一些动画效果，比方说NPC沿着湖绕行。此外，它还可以做到实时的阴影，比如下面这张效果图里，柜子的阴影。
接下来，我们再说说它的缺点。
如果场景是静态的，而且要求比较精细，那么工作量、资源消耗巨大！我们可以参考现在的3A大作，有哪个能做到和现实场景一模一样了嘛！没有！我们还可以参考好莱坞大片，那些特效镜头很酷炫很逼真，但是一帧说不定就要渲染几个小时几天的，在实时应用里根本不现实。这些都是最顶级的效果，它们的工作量可想而知，所以不论从自己项目工作量来说，还是从展示时的实时效果来看，都不适合当前这个项目。但是我不会一刀把它砍掉，因为我最开始就是这个方案，而且在别的场景里，比如3D小游戏，或者卡通风的监控系统，用这个方案完全没问题。
总结来说，这种方案动态效果较好，可以随时增删改。但是建模工作量是比较大的，而且实际效果有着浓浓的卡通风。这里，我放一张学弟做的的效果图，大家就理解我说的是什么意思了。

3.2 基于VR/全景图的展示

批判了一通方案1，接下来要说方案2了。这种方案展示出来的东西就很逼真了，看看就知道什么交卡通风，什么叫现实风了。
这里的图是直接从网上下的，当时是测试一下这个方案可不可行。
现在有很多的装修、看房，都采用了这个技术，比如我给出一个链接，假如某天链接失效了，只要百度一下VR看房就好。希望大家不太了解这种技术的都点进去看看这个效果。我们可以看到，通过拖动，可以360°无死角地展现景色，包括看到天花板和地板。最初导师就是给了我一个类似的效果，让我找方案实现，而我由于初来乍到，以为这是3D模型的交互（确实新手也分不清），以至于偏移了技术路线。
那么我们说这个效果好啊，完虐3D模型的方法啊，3D模型展示方法还有什么存活的必要呢？
接下来我来解释这两种技术的差别。VR，或者说全景图的展示方法，我们会发现一个有趣的点：它只能拖动视角，但是不能随意地移动——换句话说，我想往左走一步看看，这是不行的！但是VR全景图也不是说完全不能移动，拿看房的例子来说，地图上通常有小箭头，如果你要看客厅，点击去客厅的小箭头，就可以切换到客厅的场景。
后面我们会讲到，全景图展示技术其实就是一张张分立的图片，每张图片使用特殊的镜头拍摄，涵盖了当前点观看的全方位的视觉信息。我们拖动视角，其实就是在原点旋转而已。但是如果想要移动我们的位置，那就必须要有一张新的图片才行。
所以它的优点就是：省事，只要有全景相机即可；逼真，毕竟是张照片，肯定看起来像实景；
缺点就是不灵活，观看的点不能随便移动；如果要在当前的基础上添加新的东西，那就必须摆好了重新拍摄，或者PS大法人工修改。

4.三维可视化展示的实现方案

这里我没有任何的对比，直接祭出Three.js，一个WEB的3D库。后面的文章也都基于这个库进行实现。其实它的教程已经有很多了，CSDN上博客也特别多。
对于我们工程运用来说，主要把握它的这些功能：视角切换，展示外部模型，展示全景图，点击交互，概括来说，就是怎么展示我们想要的东西，怎么和这些东西进行交互。

4.三维可视化展示的基本知识

这里主要说一说最基本的一些知识。我尽量不说得太多，主要用直白的语言解释我们需要用到的一些概念。更详细的，许多文章都有说，复制粘贴就没什么意思了。

4.1 坐标系

讲3D不可能不说坐标系。我们只提一个最基本的世界坐标系，因为通常我就喜欢用这个坐标系来放置东西，比如模型。
相信各位同学都学过立体几何吧？没学过这个，三维坐标系总是见过的吧？三个正交的轴交于一点，那个点就做为原点。如下面的这个示意图。
在Three.js中，这是最基本的一个坐标系了。除了对这个坐标系有了解外，对于我们写代码的人，更重要的是知道它具体是什么样的：看着这个图，我们来说Three.js中的坐标系。
首先，以我们电脑/手机屏幕水平向右为x轴，竖直向上为y轴，垂直屏幕向内为z轴。注意：这和我们中学学的立体坐标系不一样！ 中学的时候，一般是水平向右为x，垂直纸面向外为y，竖直向上为z。
我们也可以说一说为什么他要设计这么反人类的坐标系。有做过图像处理的同学就知道，显示一幅图像的时候，只有x,y轴，而图像当然是显示在我们的屏幕上。而后面我们会说屏幕显示的东西，实际上是三维空间投影在相机坐标系内的结果。
用人话说，就好像我们拿着手机拍照，拍摄的是立体的世界，但是成像是个二维的平面世界。我们拿着手机拍照之后，就相当于把x,y,z三轴表现的东西压缩到只用x,y轴就能表现了，z相对于我们成像的平面来说，就是多出来的纬度，要压缩当然是压缩z了，不然压缩了y轴，就是x,z平面，听着多难受啊！这一段实在不理解就算了，也不太重要。
当然，其实在写代码的时候，我也不太关注xz轴哪个是哪个，但是一定要记住x,z是我们通常认为的“地面”，而y是我们通常认为的高度，不然就会出现很多奇奇怪怪的不理解的问题。

4.2 相机和视角

这是Three.js中的两个概念，但是也是很通用、很基础的两个概念。我们都知道现在手机都开始标配超广角镜头了。这是百度上copy的图，我们忽略它的焦距，只看这个角度。我们正常拿手机拍摄，不放大也不缩小的时候，一般是75°的视角。可以理解为一个顶角为75°的圆锥，我们看到的只是被这个圆锥囊括的东西，再多也看不到了。
而超广角镜头的视角就比较大了，大约能达到120°左右。所以镜头里能囊括的东西就更多了。
而相机，则是三维世界中的一个点。这么说其实也不严谨，因为我说的是透视相机，也就是我们最常用的相机，也符合我们日常的使用。显示在我们屏幕上的3D场景，就好像我拿着相机，在当前我所处的点拍摄了一张照片 。希望大家都能理解这句话。如果我们想看看左边的场景，就把相机向左旋转一下——就好像我们人体原地向左转一点，再拍一张照片。想看天空，我们就抬头，或者把相机镜头对准上方拍摄。
相机其实就是我们处于3D场景中的某个点，观察某个方向的场景罢了。而视角就是我们能看到的范围有多大。
还存在另一种相机模式，叫做正交相机。这种相机就好像我们在打王者荣耀/LOL/攻城略地的页游时，每个物体不论远近，都是一样大小，后续我们也用不到，但是也并不是完全没有，所以特意说明一下。

4.3 三维模型的构成

现在的技术发展到什么地步我也不太清楚，我们就说说常用的Three.js的3D模型。一般来说，每个三维模型，都由很多很多个“面”组成。假如我们可以自由移动到场景中的任意一个地方，以不同的方式观察一个正方体。我们站在外面观察，那它就是个正方体，六个面，每个面有不同的颜色之类的。那我们想想，如果我们处于正方体中心呢？那就像是身处一个小房间里，天花、地板、前后左右墙壁都有不同颜色。那我们再想想，如果我身体有一半进入了正方体，另一半还在外面呢？因为我说了前提条件，我们可以自由移动。这时看到的东西就比较恶心了，可能能看见模型的“面”，薄薄的一层，就像充气娃娃一样。
会想到比较早的游戏，比如cs1.6的自由视角，是可以进入到建筑物内部观看的，就能发现其实所谓3D模型不过就是一层纸。
当然，我们说的可能有点太直白了——3D模型就是一层纸。如果我们就在外面看，那就已经够逼真效果够好了。那3D游戏怎么让它变成“实心”的呢？只要做好碰撞检测就好啦，所有的物体，都不允许有重叠的部分，那人就无法进入到建筑物内，这样大家就都在外面看表象，就觉得它是个实心的了。
我们再回忆玩cf之类的游戏，有时候就会出现卡bug的情况，比如卡到建筑物内部了，别人都打不到你，但是你可以拿刀子打架。这个，（我猜）大概就是碰撞检测没有做好，导致人可以偶然进入建筑物内部，而且又由于碰撞检测又不是没做，想从建筑物里出来还不是那么容易的。所以有时候偶然被卡bug了，也很无奈，动都动不了，只能自然死亡。
好了，说了这么多，我就是想强调Three.js中大部分的3D模型都是由“面”（Mesh）构成的。每个面都有自己的颜色、材质、反光特性等，光照上去就会有不同的效果。想象一下，同样是黑色的黑纸和大理石面，看上去差别非常大，这是由于不同材质对光各个频段的反射率、折射率、吸收率等都不一样。
当我们点击某个模型的时候，也可以通过Three.js自带的检测函数，检测鼠标点到了哪个面，然后再通过找这个面所属的模型来进行点击交互。

4.4 三维场景的构成

三维场景，在Three.js中，是一个Scene。在一个Scene下，会有很多的3D模型，当然由于上一节的说法，准确的说我们有很多的面。
有模型还不够，如果世界上没有光，那眼睛就没有用了——我们是观察不到任何东西的，只能通过碰撞和触摸来感知世界——所以，还要有光。光主要分为点光源和环境光。环境光就是场景中均匀的灯光，这种光会使得你从任何角度观察一个面的感受都一样。而点光源则是像灯光一样，可以造成阴影等效果。
有了光，我们还需要相机来观看这个世界。同时，我们还需要辅助工具来移动和旋转相机。整个场景这么大，不论在哪个点观看，肯定都看不全，会有很多的遮挡情况，所以我们希望可以移动起来，以不同的角度完整地看看这个世界。而这里说的辅助工具，在Three.js中就叫做Controller，它将用户鼠标点击、拖动等操作，反馈为相机的移动——比方说在FPS游戏中，我们是第一人称视角（First-Person，FP的含义），WSAD控制相机前后左右移动，鼠标拖动控制相机水平和竖直旋转角；在第三人称游戏中，比如吃鸡的第三人称模式下，相机就是距离身体有一小段距离，围绕着自身旋转，就好像有个狗崽队一直跟在你屁股后面拍摄你一样。同样是拖动鼠标，但是不同模式的控制器，相机的移动和旋转逻辑是不一样的。

5.后记

相比于之前写的数学的博文，这篇文章看起来真够短的。
本文主要是介绍了两种三维展示技术，根据项目背景对他们进行了对比，附带说明了一些基本概念。后续就要介绍3D模型的方案和VR方案是如何实现的了。
在文章的组织方面，我一直坚持，项目的开始一定是调研，了解现在常用的技术有哪些，并且尽量选择主流的技术——所谓主流，就是当前用的人多，而且还有持续的维护更新。因此我花了很多的篇幅来介绍概念，举很多的例子来把概念和实际生活联系在一起。虽然这样一篇文章在众多上来就是一堆代码的文章中并没那么“实用”，但是作为自己项目的一种记录和实验室的技术传承，还是必须要有头有尾的：我要做什么事情，现在有谁做这件事情，哪种最适合我的要求？然后才是怎么用这种方法去实现甲方要求。

Web三维可视化监控系统搭建（1）——Web三维/ VR交互技术初探相关推荐

Web三维可视化监控系统搭建（2）——VR场景显示和交互
文章目录 1.本文主要内容 2.VR/全景图场景的基本原理 2.1 VR场景是个球 2.2 VR图到球的映射关系 3.VR/全景图场景的获取 4.Three.js内展示全景图 4.1 改变视野大小 5 ...
基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用
前言得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应 ...
基于 HTML5 的计量站三维可视化监控系统 Web 组态工控应用
得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应! 如 ...
加油站三维可视化监控系统，安全管理智慧运营
前言加油站是指为汽车和其它机动车辆服务的.零售汽油和机油的补充站,一般为添加燃料油.润滑油等.由于加油站所销售的石油商品具有易燃爆.易挥发.易渗漏.易集聚静电荷的特性,故加油站以"安全&q ...
【解决方案】智慧加油站三维可视化监管系统
智慧加油站建设背景当前,在全球能源体系中,化石能源依然占据主导地位.以石油为例,其作为"工业的血液",贯穿我们的整个生活,大到国家的工业.农业.交通.国防,小到每个人的衣食住行, ...
高并发系统搭建：web负载均衡
高并发系统搭建:web负载均衡所谓的负载均衡就是让多个请求尽量均衡的分配到不同的机器上面去 1. HTTP负载均衡当用户的请求发来之后,web服务器通过修改HTTP响应报头中的Location标记 ...
c++可视化界面_新基建的福音：智慧楼宇可视化监控系统引领智能化新时代
前言智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注.目前智慧楼宇可视化监控的主要优点包括: 智慧化 -- 智慧楼宇是 ...
Grafana监控系统之Prometheus+Grafana监控系统搭建
Grafana监控系统之Prometheus+Grafana监控系统搭建本文章内容较长,可通过右上角点击目录快速定位想看的内容 => => 一. 概述 1.1 Grafana介绍 Gra ...
Traefik监控系统搭建
Traefik监控系统搭建背景前边的文章Traefik学习中已经介绍了Traefik的使用,但是如果没有一个可视化的Traefik访问状态与Acces Log的Dashboard界面的话,对于一个 ...

Web三维可视化监控系统搭建（1）——Web三维/ VR交互技术初探

文章目录