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

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大作，有哪个能做到和现实场景一模一样了嘛！没有！我们还可以参考好莱坞大片ÿ