最近朋友问我有没有推荐的可以预览3D图片的JS插件，于是，上网找了找，还真发现一款不错的JS库，在此推荐给大家。

Photo Sphere Viewer

Photo Sphere Viewer是一个JavaScript库，可以使用Photo Sphere（Android 4.2 Jelly Bean及以上版本的新相机模式）渲染360°全景照片。它也支持立方体全景。

Photo Sphere Viewer由原生JS编写，基于Three.js，在支持WebGL的系统（最新的浏览器）上具有非常好的性能，在支持HTML Canvas的其他系统上性能相当不错。

优势

体验之后，发觉有以下几点优势：

1、在移动端支持很好，适用于微信等场景。

2、支持陀螺仪，手机移动图片进行相应的移动，很酷;

3、支持添加热点Marker;

4、支持鱼眼模式，需要自己配置，详见官网;

5、操作简单

使用方法

使用这个js库需要先引入必须的JS和CSS，最新版本请移步官网。

HTML结构

你需要创建一个空的div来放置全景图，通过CSS设置宽高属性。

<div id="container"></div

初始化

你需要创建一个Photo Sphere Viewer对象来初始化JS库，并传递一系列对象参数。一个最简单的Photo Sphere Viewer对象需要包含以下参数。

<script> 
 var viewer = PhotoSphereViewer({ 
 container: 'container', 
 panorama: 'path/to/panorama.jpg' 
 }); 
</script>

其中，container是容器ID，panorama是图片路径，推荐使用服务端绝对路径。

以下为demo截图：

其他配置

你还可以传入一些其他参数来自定义全景图。

panorama：（必选）全景图的路径。

container：（必选）放置全景图的容器。

autoload：（默认为true）true为自动加载全景图，false为迟点加载全景图（通.过load方法）。

usexmpdata：（默认值为true）photo sphere viewer是否必须读入xmp数据，false为不必须。

cors_anonymous：（默认值为true）true为不能通过cookies获得用户

pano_size：（默认值为null）全景图的大小，是否裁切。

default_position：（默认值为0）定义默认位置，用户看见的第一个点，例如：{long: math.pi, lat: math.pi/2}。

min_fov：（默认值为30）观察的最小区域，单位degrees，在1-179之间。

max_fov：（默认值为90）观察的最大区域，单位degrees，在1-179之间。

allow_user_interactions：（默认值为true）设置为false，则禁止用户和全景图交互（导航条不可用）。

allow_scroll_to_zoom：（默认值为true）若设置为false，则用户不能通过鼠标滚动进行缩放图片。

tilt_up_max：（默认值为math.pi/2）向上倾斜的最大角度，单位radians。

tilt_down_max：（默认值为math.pi/2）向下倾斜的最大角度，单位radians。

min_longitude：（默认值为0）能够展示的最小经度。

max_longitude：（默认值为2PI）能够展示的最大维度。

zoome_level：（默认值为0）默认的缩放级别，值在0-100之间。

long_offset：（默认值为PI/360）mouse/touch移动时每像素经过的经度值。

lat_offset：（默认值为pi/180）mouse/touch移动时每像素经过的纬度值。

time_anim（默认值为2000）全景图在time_anim毫秒后会自动进行动画。（设置为false禁用它）

reverse_anim：（默认值为true）当水平方向到达最大/最小的经度时，动画方向是否反转（仅仅是不能看到完整的圆）。

anim_speed：（默认值为2rpm）动画每秒/分钟多少的速度。

vertical_anim_speed：（默认值为2rpm）垂直方向的动画每秒/分钟多少的速度。

vertical_anim_target：（默认值为0）当自动旋转时的维度，默认为赤道。

navbar：（默认为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图片的路径。

loading_html：（默认值 为null）html加载器（添加到容器中的元素或字符串）。

size：（默认值为null）全景图容器的最终尺寸，例如{width: 500, height: 300}。

onready：（默认值为null）全景图准备好并且第一张图片展示出来后的回调函数。

总结

Photo Sphere Viewer的使用非常简单，你不需要学习VR的很多东西，只需要进行配置即可，它提供了很多配置可选，还有相应的事件处理，希望你会喜欢。

附录

demo地址（移动端）：http://yanyuanfe.cn/my/home/vrimg.html

官方文档地址： http://photo-sphere-viewer.js.org/