如果你用过网页版的百度地图，3D全景浏览的体验可能会很爽：你可以在360度的一点环顾四周的建筑和风景，当然，你也可以四处走动，就像身临其境一样。科普全景图分为三种：①球形全景图是利用一张全景图构成一个球体，其位置位于球体内部。由于图像是一个矩形，顶部和底部的接缝清晰可见。球形全景图是最接近人眼的构建方式。如果采用多个立面来构建，拼接方式繁琐，性能消耗高。因此，本文介绍的是上述由全景图构成的球形全景图。②立方体全景图一个立方体由六个面组成，所以需要六张图片。它自己的位置在立方体的中间。这也是最常见的全景图构建模式。③柱状全景这是前两种构建模式的结合版本。在浏览器中实现3D全景浏览开发，首先需要具备几个条件：①支持WebGL和canvas的浏览器②Three.js这个插件这里就不介绍了，所以阅读本文需要对Three.js有简单的基础O(∩_∩)O~下载地址：https://github.com/mrdoob/three.js③photo-sphere-viewer.js这是一款基于Three.js开发的柱状全景图插件下载地址：https://github。com/JeremyHeleine/Photo-Sphere-Viewer④全景图上面的360度全景图可以从左到右完全拼接，这样环顾四周时自然。现在也有可以生成全景图的工具，这里就不介绍了。全景素材站：http://www.tupian114.com/tupian/quanjing.html现在开始上代码！！！HTML部分：需要一个标签元素作为全景图的容器，引入需要的两个插件。js部分：初始化插件，创建photosphereviewer对象。其中，前两个选项panorama和container是必须的，其他的都是可选的。那么，3D全景效果就这样实现了，简单。下面介绍一下配置参数和方法。配置参数介绍panorama：（必填）全景图的路径。container：（必填）放置全景图的容器。autoload：（默认为true）true是自动加载全景图，false是稍后加载全景图（通过load方法）。usexmpdata：（默认值为true）全景照片查看器是否必须读入xmp数据，false表示不需要。cors_anonymous：（默认值为true）true表示用户无法通过cookie获取pano_size：（默认值为null）全景图的大小，是否裁剪。default_position：（默认值为0）定义默认位置，即用户看到的第一个点，例如：{long:math.pi,lat:math.pi/2}。min_fov：（默认值为30）观察的最小区域，单位为度，在1-179之间。max_fov：（默认值为90）最佳观察区域，单位为度，在1-179之间。allow_user_interactions：（默认值为true）设置为false，禁止用户与全景交互（导航栏不可用）。allow_scroll_to_zoom：（默认值为true）如果设置为false，则用户不能通过鼠标滚动来缩放图像。tilt_up_max：（默认值为math.pi/2）向上倾斜的最大角度，单位弧度。tilt_down_max：（默认值为math.pi/2）向下倾斜的最大角度，单位弧度。min_longitude：（默认值为0）可以显示的最小经度。max_longitude：（默认值为2PI）可以显示的最大维度。zoome_level：（默认值为0）默认缩放级别，值在0-100之间。long_offset：（默认值为pi/360）鼠标/触摸移动时每个像素经过的经度值。lat_offset：（默认值为pi/180）鼠标/触摸移动时每个像素点的纬度值。time_anim（默认2000）全景图将在time_anim毫秒后自动设置动画。（设置为false禁用）reverse_anim：（默认true）当水平方向达到最大/最小经度时是否反转动画方向（就是看不到完整的圆圈）。anim_speed：（默认2rpm）动画每秒/分钟的速度。vertical_anim_speed：（默认值为2rpm）动画在垂直方向的速度每秒/分钟。vertical_anim_target：（默认值为0）自动旋转时的维度，默认为赤道。导航栏：（默认为false）显示导航栏。navbar_style：（默认为false）导航栏的样式。有效属性：backgroundColor：导航栏背景色（默认值rgba(61,61,61,0.5)）；buttonsColor：按钮前景色（默认值rgba(255,255,255,0.7)）；buttonBackgroundColor：按钮激活时的背景色（默认值rgba(255,255,255,0.1)）；buttonsHeight：按钮高度，单位px（默认值20）；autorotateThickness：自动旋转图像层（默认值1）；zoomRangeWidth：缩放光标宽度，单位px（默认值50）；zoomRangeThickness：缩放游标层（默认值1）；zoomRangeDisk：缩放光标放大倍数，单位px（默认值7）；fullscreenRatio：全屏图标比例（默认值4/3）；fullscreenThickneee：全屏图像层，单位px（默认值2）loading_msg：（默认值为Loading...）加载信息。loading_img：（默认值为null）加载图片的路径。loading_html：（默认为null）html加载器（添加到容器中的元素或字符串）。size：（默认为空）全景图容器的最终大小，例如{width:500,height:300}。onready：（默认为null）全景图准备好，第一张图显示后的回调函数。方法介绍addAction()：添加一个事件（插件没有提供执行事件的方法，好像是提供给插件内部使用的）。fitToContainer()：调整全景图容器的大小为指定大小。getPosition()：获取坐标的经纬度。getPositionInDegrees()：获取经纬度。getZoomLevel()：获取缩放级别。load()：加载全景图()。moveTo(longitude,latitude)：根据经纬度移动到某个点。rotate(dlong,dlat)：根据经纬度移动到某一点。toggleAutorotate()：是否开启全景图的自动旋转。toggleDeviceOrientation()：是否开启重力感应方向控制。toggleFullscreen()：是否开启全景全屏。toggleStereo()：是否启用立体效果（可用于WebVR）。zoom(level)：设置缩放级别。zoomIn()：放大。zoomOut()：缩小。
