如果你用过网页版的百度地图,你大概3D全景图浏览是一种怎样的酷炫体验:在一个点可以360度环顾周围的建筑、景色,当然也可以四周移动,就像身临其境。
科普
全景图共分为三种:
①球面全景图
利用一张全景图围成一个球,自身位置位于球体内。由于图片是矩形,所以最上和最下的缝合处很明显就能够看得出来。
球面全景图是最接近人眼的构建模式,若利用多个立面构建,拼接方法繁琐,性能消耗高。
因此,本文介绍的是上述通过一张全景图构成的球面全景图。
②立方体全景图
一个立方体,有六个面组成,所以就需要六张图片啦。自身的位置位于立方体中间。这也是最常见的全景图构建模式。
③柱状全景图
这个则是前两种构建模式的结合版啦。
准备
在浏览器中实现3D全景浏览开发,首先需要几样东西:
①支持WebGL和canvas的浏览器
②Three.js
这里就不介绍这个插件了,所以阅读本文需要Three.js简单的基础 O(∩_∩)O~
下载地址:https://github.com/mrdoob/three.js
③photo-sphere-viewer.js
这是基于Three.js开发的柱状全景图插件