1. 文章背景

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

2.文章脉络

这个系列，我计划分为如下几个部分：
1.简单的三维交互技术介绍，以及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上博客也特别多。
对于我们工程运用来说，主要把握它的这些功能：视角切换，展示外部模型，展示全景图，点击交互，概括来说，就是怎么展示我们想要的东西，怎么和这些东西进行交互。

5.后记

相比于之前写的数学的博文，这篇文章看起来真够短的。
本文主要是介绍了两种三维展示技术，以及根据项目背景对他们进行了对比。后续就要介绍3D模型的方案和VR方案是如何实现的了。