如果你用过网页版的百度地图，你可能会有一个很酷的3D全景浏览体验：你可以360度全方位环视周围的建筑、风景，当然你也可以四处走动，就像在那里一样。
科普
全景图分为三种：
①球面全景
用全景图包围一个球体，它自己的位置在球体内。由于图片为矩形，上下接缝清晰可见。
球面全景是最接近人眼的构建模式。如果采用多个高程构建，拼接方法繁琐，性能消耗高。
因此，本文介绍上述由全景图形成的球面全景图。
②立方体全景
一个立方体由六个面组成，因此需要六张图片。它的位置在立方体的中间。这也是最常见的全景构建模式。
③历史全景
这是前两种构造模式的组合版本。
准备
要在浏览器中实现3D全景浏览开发，首先需要几个东西：
①支持WebGL的浏览器和
②三.js
这个插件这里就不介绍了3d图，所以阅读本文需要简单的基础O(∩_∩)O~
下载链接：
p>
③照片–.js
这是一个基于 Three.js 开发的柱状全景图插件
下载地址：
④全景
像上面这样的360度全景可以从左到右拼接在一起，这样环顾四周很自然。
还有可以生成全景图的工具，这里就不介绍了。
全景素材网站：
开始
现在开始编码！！！
html部分：
需要一个标签元素作为全景容器，并介绍两个需要的插件。
js部分：
初始化插件并创建一个对象。
前两个选项和sum是必填项，其他是可选的。
那么，3D全景效果就这样实现了，很简单。
接下来介绍一下配置参数和方法。
配置参数介绍
：（必填）全景图的路径。
：（必需）放置全景图的容器。
：（默认为true）true为自动加载全景图，false为稍后加载全景图（通过load方法）。
：（默认为true）图片是否必须读取xmp数据，false不是必须的。
：（默认为true）true表示无法通过获取用户
：（默认值为null）全景图的大小，是否裁剪。
：（默认值为0)定义默认位置，用户看到的第一个点，例如：{long: math.pi, lat: math.pi/2}。
p>
：（默认为30)观察到的最小面积，单位，1-179之间。
：（默认为90)观察到的***面积，单位，1-179之间。
ons：（默认为 true）设置为 false 以禁用用户与全景图的交互（导航栏不可用）。
：（默认值为true）如果设置为false，则用户无法通过鼠标滚动来缩放图像。
：（默认值为 math.pi/2)向上倾斜 ***角度，单位。
：（默认值为math.pi/2)下坡的***角度，单位。
：（默认值是0)可以显示的最小经度。
：（默认为2PI）可以显示的最大纬度。
：（默认值为0)默认缩放级别，值在0-100之间。
：（默认值为PI/360)鼠标/触摸移动时每像素传递的经度值。
：（默认值为pi/180)鼠标/触摸移动时每像素传递的纬度值。
（默认值为2000)全景图在毫秒后会自动动画。（设置为false禁用）
：（默认为true）当水平方向达到最大/最小经度时动画方向是否反转（只是不可见完整的圆）。
：（默认 2rpm）动画每秒/分钟的速度。
：（默认2rpm）垂直动画每秒/分钟多少速度。
：（默认为0)自转时的尺寸，默认为赤道。
：（默认 false）显示导航栏。
：（默认 false）导航栏的样式。有效属性：
：导航栏背景颜色（默认rgba(61, 61, 61, 0. 5));
：按钮前景色（默认rgba(255, 255, 255, 0.7));
r：按钮激活时的背景色（默认为rgba(255, 255, 255, 0.1));
：按钮高度，单位px（默认20);
：自动旋转图片所在的图层（默认值1);
：缩放光标的宽度3d图，单位px（默认值50);
：缩放光标所在层（默认1);
：缩放光标的放大倍数，单位px（默认7);
p>
：全屏图标的比例（默认4/3);
：全屏图片的图层，单位px（默认2)
：（默认为…）加载信息。
：（默认为空）图像的路径。
：（默认为 null）html 加载器（要添加到容器的元素或字符串）。
size：（默认为 null）全景容器的最终大小，例如{宽度：500，：300}。
：（默认为null）全景图准备好并显示第一张图片后的回调函数。
方法介绍
()：添加事件（插件没有提供执行事件的方法，好像是提供给插件内部使用的）。
()：将全景容器调整为指定大小。
()：获取坐标经纬度。
()：获取经纬度。
()：获取缩放级别。
load(): 加载全景图()。
(, )：根据经纬度移动到一个点。
(dlong, dlat)：根据经纬度移动到一个点。
()：是否开启自动全景旋转。
ion()：是否开启重力感应方向控制。
()：是否开启全景图全屏。
()：是否开启立体效果（WebVR可用）。
zoom(level)：设置缩放级别。
()：放大。
()：缩小。
