前言
前几天（7月16号-18号），我去到了清远雅堂村开启我们团队的扶贫项目，我们的任务是为当地博物馆扫描制作三维的数字博物馆，这个项目隶属于物联网+比赛中，由各个高校自行主持举办。清远雅堂村是广东工业大学指定的扶贫村，学校希望我们学生能够发挥特长，在雅堂村中制作一些别具特色的东西。
这次活动每支团队都有1000元的经费，墙绘团队因为有其他任务，所以他们有6000元的经费（当然颜料就是一笔不少的开销）
雅堂村并没有博物馆，所以我们分配去了鱼湾的苏维埃政府旧址博物馆，距离雅堂村大概半小时的车程，我们三天的吃住就在鱼湾村的好世界宾馆中。（每天每间房90元，我们开了两间房，经费在燃烧，加上饭钱各个开销，最后我们只能尽快回来，否则本来要住一个星期的）
坑爹状况
在之前我们并没有来过这个博物馆，也不清楚会遇到什么样的情况，所以我们为三维扫描做了全方位的探索，探索的成果可以关注我Photogrammetry-学习之路系列。
去到当地才发现，完完全全坑爹了。
- 博物馆很破旧（这个其实是意料之中的）
- 展览时间很短（早上9点半到下午4点半）
- 文物全部在玻璃里面不能拿出来（最坑爹的）
这些突如其来的状况，真的让我们乱了手脚，不过当即想到了全景博物馆的方案，毕竟之前也看到过类似的效果，再加上之前张家荣制作的threejs全景丝绸之路给了我启发。
我觉得全景博物馆未必不能做，只是还需要攻克两个难点。
- 如何实现全景图的坐标定位，点击事件
- 如何完成全景图的制作
猛然回头，我发现自己都掌握了解决方法的钥匙
张家荣的大作业是解决第一个问题的钥匙。
而第二个难点的钥匙真的是多亏了以前看高中电脑书的记忆象，我记得有软件可以将摄像机的照片拼接起来，制作出全景图。
死马当活马医
我确定了方案之后，就立马开始研究了。
聪哥还提出全三维的方案，真是想让我们累到半死不活呀，之前搭建南沙政务大厅还嫌不够累吗？
首先要解决的是全景照片的问题，因为前者问题即使没有解决方案也没关系，至少我可以用最原始的three.js来完成全景图观察，完整度至少还可以接受。
所以第一步想到的当然还是百度一下，毕竟不知道什么软件比较适合。
后面再百度的推荐下找到了ptgui软件
后面还是多亏了ghostxx.com，我在上面发现了更多的全景图制作软件，我一个一个下载下来测试（当然我测试的标准是最新更新版本为主）
最后我觉得Kolor Autopano Giga 4.4 这款软件是最好用的全景图软件。
那个时候刚好研究到了接近晚上，基本把最大的难关解决了，我让建模团队帮忙拍一圈试试全景图的制作。
后面在回去宾馆之后，成功的制作出完美的全景图（除了地面和天花板）
第一个难点就顺利被解决了。
回去宾馆只有，下一个难点接踵而至，我把张家荣的github文件下载下来，进行研究。
原来是基于three.js实现的photo sphere viewer 插件，因崔思婷。
后面去找photo sphere viewer（后面简称为PSV）的具体使用方法，想不到原制作者的github仓库已经丢弃了，我拿了个很久很久的版本，死活不知道同学怎么额外加入那么多其他脚本的。
后面才发现，原来插件是有官网的，而且官网上有API文档，真是新大陆。
有了方向之后，后面的工作就好办了，主要就是在家荣的大作业上面进行魔改测试PSV的用法。
PSV难点
其实PSV的难点也还好啦，基于three.js的针对全景图的插件，学过three.js的我来说难度不大。
主要是摸清楚以下几点
- PSV参数设置
- 实现窗口大小的实时更新
- 如何添加自定义标记
- 如何实现全景图跳转
- 全局地图显示
- 如何实现标记点击出现嵌套html
PSV参数设置
- panorama - 全景图路径
- container - 嵌套的html标签
- （无视后两个参数）
- navbar - 下面导航栏的参数设置
- size - 设置大小为浏览器窗口大小（three.js偷学过来的）
- transition - 全景图过渡用的参数
- latitude_range - 限制镜头移动范围
- lang - 按钮提示
很多参数官方都有给了，API文档里面也有详细的参数设置。
再初始化的阶段涉及导航栏的参数，通过导航栏可以制作出自定义的按钮，从而实现全局地图的显示。这个后面涉及再详细讲解
实现窗口大小的实时更新
这里最大的难点是理解resize传入的参数CSSsize，这个不是单纯传数字而是传入字符串，对于动态窗口的字符串设置也是搞了好久才终于搞懂原理。
不过弄好了之后其实也是令人意外的简单。
如何添加自定义标记
自定义标记看了官方文档之后就知道是addMarker函数，鉴于每一个全景图都需要制作多个标记，我想到了用for循环遍历数组的方式来生成对应全景图的标记。
这样我就可以将参数存储到对应数组元素当中。
传入的参数大概是这样子的，所以数组中的每一个对象也是一个类。
因为标记也分为两种，一种是跳转全景图的，另一种是用于点击显示嵌套html的
通过 new 来声明对象的各种相关的参数。
然后将所有的元素统一放进一个数组里面。
这就是我对自定义标记的数据管理。
在实现这个结构的过程中除了输入数据很繁琐之外，最痛苦的莫过与坐标的输入，一开始没有弄清楚的坐标返回函数，导致所有的坐标都错误地在控制台输入，弄了一轮才发现问题。
后面为了方便输入，我专门将这种格式封装成一个js字符串输出到控制台，然后复制粘贴批量制作出我想要的变量字符串。
如何实现全景图跳转
全景图跳转官方也有一套模板的，我本来没有封装的，但是后面因为跳转的标记太多了，我将它封装一个函数了。
跳转标记最多的区域有两个，所以针对这两个庭院内侧和外侧的区域都针对做了函数封装。同时也有往庭院跳（第一张图）和庭院往外跳（第二张图）区别
主要的核心代码就是PSV.setPanoram(url,true)
这里的运行逻辑：
- 跳转全景图
- 清理当前的标记
- 然后设置当前的全景图状态为False
- 将跳转的全景图设置为True
- 添加跳转全景图的标记
- 随机将镜头移动到标记中
这里的去全景图状态是用来判断当前是哪一个全景图在观察，在后面的地图制作非常有用。
全局地图显示
全局地图就是导航栏下面的地图按钮
实现点击地图对应按钮进行跳转
这里的操作涉及到导航栏的自定义按钮制作，上面的参数是官方提供用来设置按钮的基本属性。
clickEvent是封装好的按钮跳转函数，跳转逻辑和标记的跳转基本一致。
最后一行加多了按钮图标刷新的函数。
通过这些方法实现全局地图跳转的功能。
在制作的过程中我还加入了html5tooltip插件，实现图标上方的提示标签，我以前些three.js有封装过相应的函数，直接拿来用了。
标记点击出现嵌套html
普通标记的嵌套Html我也封装了函数
通过markerInfo函数将按钮的所有信息整合到一起，其中倒数第二个参数content是实现嵌套html的关键
通过addMarker函数将content嵌套进去，PSV就会自动完成右侧的弹出菜单,简单快捷。
嵌套的html的内容和id需要提前定义好。
全屏按钮BUG
上面是已知问题的解决方案，然而在测试的过程中，我发现PSV自带的全屏效果和地图按钮的窗口冲突了，只要全屏就看不见地图。
经过调试，我也不知道是哪里的问题，最开始以为是z-index的问题，但是我调试的时候吧PSV的style都设为透明了，还是看不见弹出窗口。
最后我只能重做全屏窗口。
重做其实也并没有那么难，以前写three.js的时候有写过相关的函数，这里也是直接复制套用了。效果也是立竿见影，很不错。
同时我也想将PSV自带的全屏图标转换弄到自定义按钮当中，实现是这样子的。
PSV用的图标是SVG来的，我用Jquery把它加进去。
手机自适应问题
在手机上Chrome浏览器会出现鼠标浮动的问题，需要在头部加入以下代码
1 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
制作总结
以上就是PSV使用过程中的全部技术难点，也并没有那么复杂，最难受的是数据输入，大量的数据等着我，这个过程非常繁琐，所以后面经常是生成代码，复制粘贴进去修改的。
总结
这次清远之行也还好，虽然突发状况让我们很慌，最后也还是有个明确方案解决问题。比起其他团队，我们的待遇好很多，博物馆的影音室有空调，平时工作都可以叹空调，虽然拍全景的时候在房间里面拍照，很闷很热，不过还可以回到影音室休息。
方案是我想的，代码是我去研究的，拍照基本上都是我和建模团队一起完成的┗|｀O′|┛ 嗷~~
目前所有的数据录入已经完成，等建模团队把模型弄好基本就可以完成任务了。
