Photo Sphere Viewer使用指南

Photo Sphere Viewer 是一款基于 Three.js 开发的 JavaScript 插件，用于展示 360×180 度全景图像。它支持水平360度旋转和垂直180度上下浏览，带来沉浸式的全景视觉体验。该插件依赖 canvas 或 WebGL 技术，因此只需浏览器具备相应支持即可流畅运行，无需额外配置，适用于各类网页全景图展示场景。

1、 使用该全景图插件需引入three.min.js和photo-sphere-viewer.min.js两个文件，确保功能正常运行。

2、 创建一个空的div用于承载全景图，并用CSS设定其宽高尺寸。

3、 初始化该全景图插件时，需创建一个PhotoSphereViewer对象，并传入包含必要参数的配置对象，其中有两个参数为必填项，必须进行设置。

4、 });

5、 全景图插件全部可配置参数如下：

6、 全景图路径为必填项，需提供正确地址。

7、 container为必填项，需指定用于承载全景图的div容器元素。

8、 autoload为可选参数，默认值为true，表示自动加载全景图；设为false时，则需通过.load()方法手动加载全景图内容。

9、 usexmpdata为可选参数，默认值为true，表示Photo Sphere Viewer是否需要读取XMP数据。

10、 default_position：可选参数，缺省为空对象{}，用于设定初始显示位置，即用户首次看到的视点坐标，如{long: Math.PI, lat: Math.PI/2}所示。

11、 min_fov：可选参数，默认值30，表示观察最小范围，单位为度，取值范围1至179。

12、 max_fov：可选参数，默认值为90，表示观测最大范围，单位为度，取值范围在1至179之间。

13、 允许用户交互：可选参数，默认开启，设为关闭时将禁用用户与全景图的互动操作，导航条同时失效。

14、 向上倾斜最大角度，默认值为π/2弧度，单位为弧度，可选参数。

15、 向下倾斜最大角度，单位为弧度，默认值为π/2，可选参数。

16、 缩放级别为可选参数，默认值0，取值范围0至100。

17、 long_offset：可选参数，默认值为PI/360，表示鼠标或触摸移动时每个像素对应的经度变化量。

18、 纬度偏移量，默认为π/180，表示鼠标或触摸移动时每个像素对应的纬度变化值。

19、 time_anim：可选参数，默认2000毫秒，全景图将在指定时间后自动启动动画效果；设为false可关闭此功能。

20、 theta_offset：已弃用参数，可选，默认1440，用于设定自动动画在水平方向的移动速度。

21、 动画速度参数，可选，默认值为每分钟2转，用于设置动画每秒或每分钟的弧度、角度或转数。

22、 navbar：可选参数，默认关闭，用于控制导航条的显示。

23、 navbar_style：可选参数，默认为空对象，用于设置导航条的自定义样式，支持多种样式配置。

24、 导航条背景颜色，用于设置其外观，默认采用半透明深灰色，具体为rgba(61, 61, 61, 0.5)，可按需自定义。

25、 按钮前景色，默认为透明，可自定义设置颜色。

26、 按钮在激活状态下的背景颜色，用于区分当前选中项，默认采用半透明白色，具体值为rgba(255, 255, 255, 0.1)，可依据主题进行自定义设置。

27、 按钮高度，以像素为单位，默认值为20。

28、 autorotateThickness 表示自动旋转图标的线条粗细，以像素为单位，默认值为1。

29、 zoomRangeWidth：表示缩放范围，单位为显示单位，默认值为50。

30、 缩放范围的厚度，以像素为单位，默认值为1。

31、 缩放范围圆盘的直径，以像素为单位，默认大小为7像素。

32、 fullscreenRatio：全屏图标的显示比例，缺省值为3/4。

33、 全屏图标厚度，以像素为单位，默认值为2。

34、 图片加载时显示的提示文字，可自定义，默认为Loading…。

35、 可选参数，用于设置加载时显示的图片路径，默认为空。

36、 尺寸：可选参数，默认为空，用于设置全景图容器的最终大小，如指定宽度500、高度300的尺寸对象。

37、 onready：可选参数，默认为空。全景图加载完成并显示首帧图像时触发的回调函数。

38、 一款利用Three.js实现的全景预览插件，支持360度×180度全景图像的流畅展示与交互体验。

39、 一款基于Three.js的全景图像预览插件，支持360×180度球形全景图展示。该工具以JavaScript编写，可轻松实现沉浸式全景浏览体验，适用于各类网页端场景，帮助开发者快速集成高质量的交互式全景视图功能，提升用户视觉感受与操作体验。

40、 一个专注于前端技术分享的网站，提供丰富的jQuery插件、HTML5特效及CSS3实例，帮助开发者快速实现网页交互效果。这里汇集了大量实用的代码资源和教程，是学习与提升前端技能的理想平台。欢迎访问这个致力于推动Web技术发展的在线社区，探索更多创新的网页解决方案，提升开发效率与用户体验。

41、 前往该网页可返回到资源下载页面，获取相关素材与代码示例。此链接指向一个提供前端开发特效的网站，内容涵盖基于jQuery实现的各类图像动态效果。其中包含详细的技术说明、演示实例以及可供直接使用的源码包，适用于网页设计与交互功能优化。点击按钮即可跳转至目标页面，方便用户查阅和下载所需资料，提升开发效率。该站点持续更新多种实用插件与视觉特效方案，是前端开发者的重要参考平台之一。

42、 以下示例可调用预设全景图，用于测试插件功能，点击按钮即可查看实际效果。

43、 点击此处可加载预设的全景图像内容

44、 点击下方按钮，可上传本地全景图预览效果。实现基于FileReader API，代码简洁明了，具体细节可参考example1.js文件中的内容。操作方便，即时查看上传结果。

45、 全景图预览所示

46、 浏览器兼容情况见下图示