Web三维可视化监控系统搭建（2）——VR场景显示和交互

1.本文主要内容

基础知识我已经在上一篇文章中说完了，从这一篇开始讲讲代码实现。这一篇文章主要说说VR/全景场景显示和交互的原理。
放一个做的半成品，可以展现全景图的html代码。但是交互之类的，都没放进去，动动手往里加哈，毕竟我们是说技术，不是代做毕设。
在这篇文章和几乎整个系列中，VR图和全景图这两个概念我们混用，认为是完全相同的。
码云示例仓库地址，考虑到国内访问gayhub的速度，我就放在码云上了。运行其中的vr_test.html即可看到vr效果。强调一点，不然打开前部署，不然就使用旧版edge打开，否则会获取不到本地的VR图片。

2.VR/全景图场景的基本原理

首先我还是把上一节用到的VR看房的链接放在这里。我们点进去任意一个案例，都能看到这样的变化：
首先，出现一个球；然后我们的视点一直往球内部走，当然也可能有旋转之类的，此时的图像会有些变形；最后我们到达了正常的视点，周围的景物看起来就非常正常了，仿佛我们置身于一个3D场景中。

2.1 VR场景是个球

由于我懒得画图——我就用嘴凭空叙述VR图的原理了。我们想象一个场景——我觉得这是我举例子的口头禅——我们打开相机的“全景图”模式，相信大家都用过这么模式，它可以拍长图，但是并不能一下快门就出图，它得拍摄者原地旋转360°，然后出一张长图。这个原理我们很容易就能想到，隔一段时间拍一幅图像，然后把这些水平移动过程中产生的图像通过某种算法拼接在一起即可。
我还要申明一下，手机的全景图模式和我这里说的全景图/vr展示，是两个概念。
那我们再想象一下——如果我们全方位地拍摄这个点周围的图像，包括天和地，那是不是就可以根据我在场景中观察的角度，直接加载对应角度的图像，达到了“我处于这个场景中”的假象呢？
假如我现在看向水平0°这个方位，那我眼前就要出现一张相机在这个点、这个方位拍摄地照片，如果我左转10°，那我的眼前就要出现一张类似的图片，这样我不管怎么改变看的角度，都能出现对应的图像，不就是给了我身处场景的假象了吗！
我们再回到这个看房的例子上，一开始出现的是一个球——我们能看到它是一个球的原因是，我们现在还在球的外面看呢！就好像在太空看地球，那确实是一个球嘛！然后我们的视点开始往球内移动，但是在到达球心之前，由于图像是在球心拍摄的，我们看到的图都会变形，横线会变得弯弯曲曲；最后到达球心之后，我们看到的就是正常的图像了。
如果说了这么多还没能让你明白呢——我给一个链接，这个链接能把VR技术和球的关系解释得非常清楚，因为它有丰富的图片。
https://blog.csdn.net/lxy19880708/article/details/91579624

2.2 VR图到球的映射关系

接下来，我们还差一步——VR图怎么映射到球上？我们先看看VR图长啥样——同样，这图直接百度copy的。看起来变形很严重啊！当然了，毕竟它最后要变成一个球啊！所以看起来肯定和正常拍摄的图像不一样。
我们先要介绍一下VR图的一个重要特点：它是2:1的。而且一定是2：1的！如果不是2：1，那说的肯定不是我这里的全景图/vr图！
好了，那我们说说为什么它是2：1的。大家都知道，地球有经纬度。经度范围是-180-180°，纬度范围是-90-90°。如果这个你不知道，我也没有办法啊！我们可以看到，经度范围刚好是纬度的两倍！
所以下面就很容易想到了：VR图都是2：1的，我们简化一下，它的像素刚好是360x180的，那岂不是球上任意一个地点的经度作为水平像素位置，纬度作为竖直像素位置（当然，还得把负的平移到正的，比如-90-90平移到0-180°），这样就可以把球面任意一点和全景图里的像素点位置对应起来了。
讲到这里，后面就没什么理论的东西了，而且大家都会觉得这也太简单了吧！是的，门外看着觉得复杂，其实门内就发现不过是只纸老虎。

3.VR/全景图场景的获取

如果只是试一试，那从百度找就是了，很多高质量的VR图网站，每天登录能免费下一张图吧。
如果是项目里要用，那就使用全景相机。比如 insta360 ONE R之类的消费级产品，大概2k左右，高级一点的也有十万的，看自己需求了。另外我觉得应该也有专门的摄影