浏览器中实现3D全景浏览

如果你用过网页版的百度地图，你大概3D全景图浏览是一种怎样的酷炫体验：在一个点可以360度环顾周围的建筑、景色，当然也可以四周移动，就像身临其境。

 

科普

全景图共分为三种：

①球面全景图

   利用一张全景图围成一个球，自身位置位于球体内。由于图片是矩形，所以最上和最下的缝合处很明显就能够看得出来。

   球面全景图是最接近人眼的构建模式，若利用多个立面构建，拼接方法繁琐，性能消耗高。

   因此，本文介绍的是上述通过一张全景图构成的球面全景图。

②立方体全景图

   一个立方体，有六个面组成，所以就需要六张图片啦。自身的位置位于立方体中间。这也是最常见的全景图构建模式。

③柱状全景图

   这个则是前两种构建模式的结合版啦。

   

准备

在浏览器中实现3D全景浏览开发，首先需要几样东西：

①支持WebGL和canvas的浏览器

②Three.js

   这里就不介绍这个插件了，所以阅读本文需要Three.js简单的基础 O(∩_∩)O~

   下载地址：https://github.com/mrdoob/three.js

③photo-sphere-viewer.js

   这是基于Three.js开发的柱状全景图插件