前端制作全景使用 krpano 的比较多，这是一套比较成熟的东西了，功能非常强大，包括 720云 等网站都在使用，但是缺点在于是需要商用授权的，而且灵活性不高。另一种方案就是使用 ThreeJS 来实现，ThreeJS 是一套 JavaScript 3D 库，全景实际上也是对 3D 场景的展示，使用 ThreeJS 可以实现任意的定制，但是由于是从头实现，且社区组件等不是太完善，所以复杂功能实现的成本相对较高。
这次只做全景主要就是为了抛弃 krpano，所以从开始就选定了 ThreeJS 方案。关于 3D 场景的基础知识网上有很多教程。这里总结一下这次做全景遇到的一些问题。
全景方案
ThreeJS 做全景可以使用球模型，也可以使用立方体模型，还可以使用圆柱模型，这个一方面看设备输出，另一方面看自己的需求啦。模型确定之后，三维到二维的投影也有很多种，可以参考『地图投影』
我们使用 iPhone 拍摄的全景照片其实就适用于圆柱模型，但是通过柱面投影之后会导致上下面没有图像，所以常规做法是在圆柱上下面贴个大 logo。
球模型的投影方式也有多种，常用的球极平面投影(小行星)、[麦卡托投影][](世界地图)等。可以通过多拍几张照片，然后使用 PTGui 软件来合成一张使用[麦卡托投影][]或球极平面投影的全景图。其原理就是多张图片之间存在较大冗余，然后通过 OpenCV 取特征点进行图像拼接，最终生成全景图。
立方体模型要求比较高，其需要面与面之间能够完美拼合。其实立方体模型也可以通过球面全景图生成的，其先使用球面全景图生成球模型，然后分别对球模型的六个面生成六张图片。
我选择的方案是球模型，使用[麦卡托投影][]，主要原因是我们的设备输出就是这种投影方式的全景图。
另外，使用立方体投影映射的方式，是可以减小图片资源的大小的，这个我没有具体试过，可以参考这里
threejs 加载 3D 模型
也许是因为前端本身的性能问题，threeJS 虽然对 dae，fbx 等格式提供相应的 loader 文件，但是经过测试发现支持都不够好，FBX ASCII编码方式是一种不常用的编码格式，dae 格式对动画支持不好。
另外官方提供的 3DMAX 的导出 json 插件，容错性也不好。
不管怎样，使用 threejs 自定义的 json 模型还是可以的，只是导出这种格式比较麻烦。
VR
浏览器有 [WebVR][] 规范，但是目前除了火狐之外，chrome 和 Safari 都还没有支持，而对于移动端，chrome 和 Safari 应该是两大主流浏览器了，所以在移动端使用 VR，需要引入[webvr-polyfill][]这个 js 库，然后我们可以通过 [VREffect][] 和 [VRControls][] 这两个组件实现双眼 VR 的功能了。另外，[webvr-boilerplate][]还提供了一个[webvr-manager][]，使用方法可以参考这里。
参考
更多关于 threejs 全景方面的使用方法，可以参考我整理的 Wiki：ThreeJS
[麦卡托投影]:(https://zh.wikipedia.org/wiki/%E9%BA%A5%E5%8D%A1%E6%89%98%E6%8A%95%E5%BD%B1%E6%B3%95) “wikipedia” [WebVR]:(https://webvr.info/) [webvr-polyfill]:https://github.com/borismus/webvr-polyfill [VREffect]:https://github.com/mrdoob/three.js/blob/master/examples/js/effects/VREffect.js [VRControls]:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/VRControls.js [webvr-boilerplate]:https://github.com/borismus/webvr-boilerplate [webvr-manager]:https://github.com/borismus/webvr-boilerplate/blob/master/build/webvr-manager.js