type
status
date
slug
summary
tags
category
icon
password
前端制作全景使用 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