Threejs 全景探索

前端制作全景使用 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 库,然后我们可以通过 VREffectVRControls 这两个组件实现双眼 VR 的功能了。另外,webvr-boilerplate还提供了一个webvr-manager,使用方法可以参考这里

参考

使用ThreeJS在浏览器中展示全景图
打造H5里的“3D全景漫游”秘籍
3D互动游戏实践

更多关于 threejs 全景方面的使用方法,可以参考我整理的 Wiki:ThreeJS