# Photo-Sphere-Viewer **Repository Path**: jianshenggit/Photo-Sphere-Viewer ## Basic Information - **Project Name**: Photo-Sphere-Viewer - **Description**: 一个使用three.js和photo-sphere-viewer.min.js库，用来做照片360度全景展示 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 2 - **Created**: 2018-07-24 - **Last Updated**: 2025-01-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Photo Sphere Viewer Photo Sphere Viewer is a JavaScript library that allows you to display 360×180 degrees panoramas on any web page. Panoramas must use the equirectangular projection and they can be taken with Photo Sphere, the camera mode brought by Android 4.2 Jelly Bean. Photo Sphere Viewer uses the [Three.js](http://threejs.org) library, so nothing is required for your visitors except for a browser compatible with canvas or, better, WebGL. ## How To Use It 1. Include the `three.min.js` and `photo-sphere-viewer.min.js` files into your page. 2. Create a `div` in the size you want for your panorama. 3. In JavaScript, create a new `PhotoSphereViewer` object. You must pass it an object containing at least two parameters for the panorama. Here is the list of available parameters. * `panorama` (required): the path to the panorama. * `container` (required): the `div` in which the panorama will be displayed. * `autoload` (optional, default to `true`): `true` to automatically load the panorama, `false` to load it later (with the `.load()` method). * `usexmpdata` (optional, default to `true`): `true` if Photo Sphere Viewer must read XMP data, `false` if it is not necessary. * `cors_anonymous` (optional, default to `true`): `true` to disable the exchange of user credentials via cookies, `false` otherwise. * `pano_size` (optional, default to null) The panorama size, if cropped (unnecessary if XMP data can be read). * `default_position` (optional, default to `{}`) Defines the default position, the first point seen by the user (e.g. `{long: Math.PI, lat: Math.PI/2}`). * `min_fov` (optional, default to `30`): the minimal field of view, in degrees, between 1 and 179. * `max_fov` (optional, default to `90`): the maximal field of view, in degrees, between 1 and 179. * `allow_user_interactions` (optional, default to `true`): If set to `false`, the user won't be able to interact with the panorama (navigation bar is then disabled). * `allow_scroll_to_zoom (optional, default to `true`): It set to `false`, the user won't be able to scroll with their mouse to zoom. * `tilt_up_max` (optional, default to `Math.PI/2`): The maximal tilt up angle, in radians. * `tilt_down_max` (optional, default to `Math.PI/2`): The maximal tilt down angle, in radians. * `min_longitude` (optional, default to 0): The minimal longitude to show. * `max_longitude` (optional, default to 2π): The maximal longitude to show. * `zoom_level` (optional, default to `0`): The default zoom level, between 0 and 100. * `long_offset` (optional, default to `PI/360`): the longitude to travel per pixel moved by mouse/touch. * `lat_offset` (optional, default to `PI/180`): the latitude to travel per pixel moved by mouse/touch. * `time_anim` (optional, default to `2000`): the panorama will be automatically animated after `time_anim` milliseconds (indicate `false` to deactivate it). * `reverse_anim` (optional, default to true) `true` if horizontal animation must be reversed when min/max longitude is reached (only if the whole circle is not described). * `anim_speed` (optional, default to `2rpm`): animation speed in radians/degrees/revolutions per second/minute. * `vertical_anim_speed` (optional, default to `2rpm`): vertical animation speed in radians/degrees/revolutions per second/minute. * `vertical_anim_target` (optional, default to `0`): latitude to target during the autorotate animation, default to the equator. * `navbar` (optional, default to `false`): set to `true`, a navigation bar will be displayed. * `navbar_style` (optional, default to `{}`): a custom style for the navigation bar. See the list below to know what properties are available. * `backgroundColor`: the navigation bar background color (default to `rgba(61, 61, 61, 0.5)`). * `buttonsColor`: the buttons foreground color (default to `rgba(255, 255, 255, 0.7)`). * `buttonsBackgroundColor`: the buttons background color (default to `transparent`). * `activeButtonsBackgroundColor`: the buttons background color when they are active (default to `rgba(255, 255, 255, 0.1)`). * `buttonsHeight`: buttons height in pixels (default to `20`). * `autorotateThickness`: autorotate icon thickness in pixels (default to `1`). * `zoomRangeWidth`: zoom range width in pixels (default to `50`). * `zoomRangeThickness`: zoom range thickness in pixels (default to `1`). * `zoomRangeDisk`: zoom range disk diameter in pixels (default to `7`). * `fullscreenRatio`: fullscreen icon ratio (default to `4/3`). * `fullscreenThickness`: fullscreen icon thickness in pixels (default to `2`). Colors can be in `rgb()`, `rgba()` or hexadecimal format, and the keyword `transparent` is accepted. * `loading_msg` (optional, default to `Loading…`): Loading message. * `loading_img` (optional, default to `null`): the path to the image shown during the loading. * `loading_html` (optional, default to null) An HTML loader (element to append to the container or string representing the HTML). * `size` (optional, default to `null`): the final size of the panorama container (e.g. `{width: 500, height: 300}`). * `onready` (optional, default to `null`) Function called once the panorama is ready and the first image is displayed. You can find a basic example of use in the file `example.html`. The `example1.html` is a more complete (and more interesting) example. If your panorama is taken with Google's Photo Sphere, `usexmpdata` must be set to `true`, unless it is not cropped. ## License This library is available under the MIT license. ## 配置参数介绍 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） 全景图准备好并且第一张图片展示出来后的回调函数。 ## 方法介绍 addAction()： 添加事件（ 插件没有提供执行事件的方法， 似乎是提供给插件内部使用的）。 fitToContainer()： 调整全景图容器大小为指定大小。 getPosition()： 获取坐标经纬度。 getPositionInDegrees()： 获取经纬度度数。 getZoomLevel()： 获取缩放级别。 load()： 加载全景图（）。 moveTo(longitude, latitude)： 根据经纬度移动到某一点。 rotate(dlong, dlat)： 根据经纬度度数移动到某一点。 toggleAutorotate()： 是否开启全景图自动旋转。 toggleDeviceOrientation()： 是否开启重力感应方向控制。 toggleFullscreen()： 是否开启全景图全屏。 toggleStereo()： 是否开启立体效果（ 可用于WebVR哦）。 zoom(level)： 设置缩放级别。 zoomIn()： 放大。 zoomOut()： 缩小。