VR框架-Pannellum的使用
景宏富
一，PANNELLUM的介绍
- 1.1 什么是Pannellum。
Pannellum是一款轻量级，免费且开源的全景浏览器，适用于网络。它使用HTML5，CSS3，JavaScript和WebGL构建，不受插件限制。
- 1.2 pannellum的浏览器限制
Firefox 10+
Chrome 15+
Safari 8+
Internet Explorer 11+
Edge
- 1.3 不支持的浏览器版本
Internet Explorer 10和之前的版本
二. 框架的资源地址
- cdn文件地址
<!-- Latest compiled and minified standalone viewer -->
https://cdn.pannellum.org/2.5/pannellum.htm
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css">- Pannellum 官网地址
- GitHub 地址
GitHub 地址https://github.com/mpetroff/pannellum
三. API配置介绍
# JSON Configuration File Options(JSON配置文件选项)
## General options(通用选项)
### `type` (string)
This specifies the panorama type. Can be `equirectangular`, `cubemap`, or
`multires`. Defaults to `equirectangular`.(这指定全景图类型。可以是“equirectangular”、“cubemap”或
`多分辨率`。默认为“equirectangular”。)
### `title` (string)
If set, the value is displayed as the panorama's title. If no title is desired,
don't set this parameter.(如果设置，该值将显示为全景图的标题。如果不需要标题，
不要设置这个参数。)
### `author` (string)
If set, the value is displayed as the panorama's author. If no author is
desired, don't set this parameter.(如果设置，该值将显示为全景图的作者。如果没有作者
需要，不要设置此参数。)
### `authorURL` (string)
If set, the displayed author text is hyperlinked to this URL. If no author URL
is desired, don't set this parameter. The `author` parameter must also be set
for this parameter to have an effect.(如果设置，显示的作者文本将超链接到此 URL。如果没有作者网址
需要，请不要设置此参数。还必须设置 `author` 参数使该参数生效。)
### `strings` (dictionary)
Allows user-facing strings to be changed / translated.
See `defaultConfig.strings` definition in `pannellum.js` for more details.(允许更改/翻译面向用户的字符串。
有关详细信息，请参阅 `pannellum.js` 中的 `defaultConfig.strings` 定义。)
### `basePath` (string)
This specifies a base path to load the images from.(这指定了从中加载图像的基本路径。与panorama字段会有冲突,不会加载panorama的图片,只限制网络图片)
### `autoLoad` (boolean)
When set to `true`, the panorama will automatically load. When `false`, the
user needs to click on the load button to load the panorama. Defaults to
`false`.(当设置为 true 时，全景图将自动加载。当 `false` 时，用户需要点击加载按钮来加载全景图。默认为`false`。)
### `autoRotate` (number)
Setting this parameter causes the panorama to automatically rotate when loaded.
The value specifies the rotation speed in degrees per second. Positive is
counter-clockwise, and negative is clockwise.(设置此参数会导致全景图在加载时自动旋转。
该值以每秒度数指定旋转速度。正的是逆时针，负为顺时针。)
### `autoRotateInactivityDelay` (number)
Sets the delay, in milliseconds, to start automatically rotating the panorama
after user activity ceases. This parameter only has an effect if the
`autoRotate` parameter is set. Before starting rotation, the viewer is panned
to the initial pitch.(设置延迟（以毫秒为单位）以开始自动旋转全景图用户活动停止后。此参数仅在`autoRotate` 参数已设置。在开始旋转之前，查看器被平移到初始音高。)
### `autoRotateStopDelay` (number)
Sets the delay, in milliseconds, to stop automatically rotating the panorama
after it is loaded. This parameter only has an effect if the `autoRotate`
parameter is set.(设置延迟（以毫秒为单位）以停止自动旋转全景图加载后。此参数仅在 `autoRotate`参数已设置。)
### `fallback` (string)
If set, the value is used as a URL for a fallback viewer in case Pannellum is
not supported by the user's device. The user will be given the option to click
a link and visit this URL if Pannellum fails to work.(如果设置，该值将用作后备查看器的 URL，以防 Pannellum 是用户设备不支持。用户将可以选择单击一个链接，如果 Pannellum 无法工作，请访问此 URL。)
### `orientationOnByDefault` (boolean)
If set to `true`, device orientation control will be used when the panorama is
loaded, if the device supports it. If false, device orientation control needs
to be activated by pressing a button. Defaults to `false`. Note that a secure
HTTPS connection is required for device orientation access in most browsers.(
如果设置为 `true`，全景图时将使用设备方向控制已加载，如果设备支持的话。如果为false，设备方向控制需要按下按钮即可激活。默认为“假”。请注意，一个安全的大多数浏览器中的设备方向访问都需要 HTTPS 连接。)
### `showZoomCtrl` (boolean)
If set to `false`, the zoom controls will not be displayed. Defaults to `true`.(如果设置为“false”，则不会显示缩放控件。默认为“true”。)
### `keyboardZoom` (boolean)
If set to `false`, zooming with keyboard will be disabled. Defaults to `true`.(如果设置为“false”，将禁用使用键盘缩放。默认为“true”。)
### `mouseZoom` (boolean or string)
If set to `false`, zooming with mouse wheel will be disabled. Defaults to `true`.
Can also be set to `fullscreenonly`, in which case it is only enabled when the
viewer is fullscreen.(如果设置为“false”，将禁用鼠标滚轮缩放。默认为“真”。也可以设置为`fullscreenonly`，在这种情况下它只在查看器是全屏的。)
### `draggable` (boolean)
If set to `false`, mouse and touch dragging is disabled. Defaults to `true`.(如果设置为“false”，则禁用鼠标和触摸拖动。默认为“true”。)
### `friction` (number)
Controls the "friction" that slows down the viewer motion after it is dragged
and released. Higher values mean the motion stops faster. Should be set
(0.0, 1.0]; defaults to 0.15.(控制拖动后减慢观察者运动的“摩擦力”并释放。较高的值意味着运动停止得更快。应该设置(0.0, 1.0]; 默认为 0.15。拖拽之后滑动的轨迹)
### `disableKeyboardCtrl` (boolean)
If set to `true`, keyboard controls are disabled. Defaults to `false`.(如果设置为“true”，则禁用键盘控件。默认为“false”。)
### `showFullscreenCtrl` (boolean)
If set to `false`, the fullscreen control will not be displayed. Defaults to
`true`. The fullscreen button will only be displayed if the browser supports
the fullscreen API.(如果设置为“false”，则不会显示全屏控件。默认为`真实`。全屏按钮只有在浏览器支持时才会显示全屏API。)
### `showControls` (boolean)
If set to `false`, no controls are displayed. Defaults to `true`.(如果设置为“false”，则不显示任何控件。默认为“true”。)
### `touchPanSpeedCoeffFactor` (number)
Adjusts panning speed from touch inputs. Defaults to `1`.(通过触摸输入调整平移速度。默认为“1”。)
### `yaw` (number)
Sets the panorama's starting yaw position in degrees. Defaults to `0`. (以度为单位设置全景图的起始偏航位置。默认为“0”。)
### `pitch` (number)
Sets the panorama's starting pitch position in degrees. Defaults to `0`. (以度为单位设置全景图的起始俯仰位置。默认为“0”。)
### `hfov` (number)
Sets the panorama's starting horizontal field of view in degrees. Defaults to
`100`.(以度为单位设置全景图的起始水平视野。默认为`100`。)
### `minYaw` and `maxYaw` (number)
Sets the minimum / maximum yaw the viewer edge can be at, in degrees.
Defaults to `-180` / `180`, i.e. no limit.(设置观察者边缘可以处于的最小/最大偏航，以度为单位。默认为 `-180` / `180`，即没有限制。即显示转动的边界)
### `minPitch` and `maxPitch` (number)
Sets the minimum / maximum pitch the viewer edge can be at, in degrees.
Defaults to `undefined`, so the viewer center can reach `-90` / `90`.（设置观察者边缘可以达到的最小/最大间距，以度为单位。默认为 `undefined`，因此查看器中心可以达到 `-90` / `90`。
### `minHfov` and `maxHfov` (number)
Sets the minimum / maximum horizontal field of view, in degrees, that the
viewer can be set to. Defaults to `50` / `120`. Unless the `multiResMinHfov`
parameter is set to `true`, the `minHfov` parameter is ignored for
`multires` panoramas.（设置最小/最大水平视野，以度为单位，查看器可以设置为。默认为“50”/“120”。除非`multiResMinHfov`参数设置为“true”，“minHfov”参数被忽略“多分辨率”全景图。）
### `multiResMinHfov` (boolean)
When set to `false`, the `minHfov` parameter is ignored for `multires`
panoramas; an automatically calculated minimum horizontal field of view is used
instead. Defaults to `false`. (当设置为“false”时，“multires”的“minHfov”参数将被忽略全景图；使用自动计算的最小水平视野反而。默认为“false”。)
### `compass` (boolean)
If `true`, a compass is displayed. Normally defaults to `false`; defaults to
`true` if heading information is present in Photo Sphere XMP metadata.(如果为“真”，则显示罗盘。通常默认为 `false`；默认为'true' 如果 Photo Sphere XMP 元数据中存在标题信息，则为“true”。)
### `northOffset` (number)
Set the offset, in degrees, of the center of the panorama from North. As this
affects the compass, it only has an effect if `compass` is set to `true`.(设置全景图中心与北方的偏移量（以度为单位）。作为这个影响指南针，只有当 compass 设置为 true 时它才会起作用。)
### `preview` (string)
Specifies a URL for a preview image to display before the panorama is loaded.(指定在加载全景图之前要显示的预览图像的 URL。)
### `previewTitle` (string)
Specifies the title to be displayed while the load button is displayed.(指定显示加载按钮时要显示的标题。会在右下方显示)
### `previewAuthor` (string)
Specifies the author to be displayed while the load button is displayed.(指定显示加载按钮时要显示的作者。会与author冲突)
### `horizonPitch` and `horizonRoll` (number)
Specifies pitch / roll of image horizon, in degrees (for correcting
non-leveled panoramas).(指定图像水平的俯仰/滚动，以度为单位（用于校正非水平全景）。)
### `animationTimingFunction` (function) [API only]
This specifies a timing function to be used for animating movements such as
when the `lookAt` method is called. The default timing function is
`easeInOutQuad`. If a custom function is specified, it should take a number
[0, 1] as its only argument and return a number [0, 1].(这指定了用于动画运动的计时功能，例如
当调用 `lookAt` 方法时。默认的计时函数是`easeInOutQuad`。如果指定了自定义函数，它应该取一个数字[0, 1] 作为它唯一的参数并返回一个数字 [0, 1]。)
### `escapeHTML` (boolean)
When true, HTML is escaped from configuration strings to help mitigate possible
DOM XSS attacks. This is always `true` when using the standalone viewer since
the configuration is provided via the URL; it defaults to `false` but can be
set to `true` when using the API.(当为true时，HTML 从配置字符串中转义以帮助减轻可能的DOM XSS 攻击。使用独立查看器时，这始终为“true”，因为配置通过 URL 提供；它默认为 `false` 但可以是使用 API 时设置为“true”。)
### `crossOrigin` (string)
This specifies the type of CORS request used and can be set to either
`anonymous` or `use-credentials`. Defaults to `anonymous`.(这指定了使用的 CORS 请求的类型，可以设置为`anonymous` 或 `use-credentials`。默认为“anonymous”。)
### `hotSpots` (object)
This specifies a dictionary of hot spots that can be links to other scenes,
information, or external links. Each array element has the following properties. (
这指定了一个热点字典，可以链接到其他场景，信息或外部链接。每个数组元素都具有以下属性。)
#### `pitch` (number)
Specifies the pitch portion of the hot spot's location, in degrees.(以度为单位指定热点位置的俯仰部分。)
#### `yaw` (number)
Specifies the yaw portion of the hot spot's location, in degrees.(指定热点位置的偏航部分，以度为单位。)
#### `type` (string)
Specifies the type of the hot spot. Can be `scene` for scene links or `info`
for information hot spots. A tour configuration file is required for `scene`
hot spots. (指定热点的类型。可以是场景链接的“场景”或“信息”对于信息热点。 `scene` 需要一个游览配置文件热点。)
#### `text` (string)
This specifies the text that is displayed when the user hovers over the hot
spot.(这指定当用户将鼠标悬停在热点上时显示的文本点。)
#### `URL` (string)
If specified for an `info` hot spot, the hot spot links to the specified URL.
Not applicable for `scene` hot spots. (如果为 `info` 热点指定，则热点链接到指定的 URL。不适用于“场景”热点。但是场景也能生效)
#### `attributes` (dict)
Specifies URL's link attributes. If not set, the `target` attribute is set to
`_blank`, to open link in new tab to avoid opening in viewer frame / page. (指定 URL 的链接属性。如果未设置，则“目标”属性设置为`_blank`，在新选项卡中打开链接以避免在查看器框架/页面中打开。)
#### `sceneId` (string)
Specifies the ID of the scene to link to for `scene` hot spots. Not applicable
for `info` hot spots.(指定要链接到“场景”热点的场景 ID。不适用对于“信息”热点。)
#### `targetPitch` (number)
Specifies the pitch of the target scene, in degrees. Can also be set to `same`,
which uses the current pitch of the current scene as the initial pitch of the
target scene.(指定目标场景的倾斜度，以度为单位。也可以设置为`same`，它使用当前场景的当前音高作为初始音高目标场景。)
#### `targetYaw` (number)
Specifies the yaw of the target scene, in degrees. Can also be set to `same` or
`sameAzimuth`. These settings use the current yaw of the current scene as the
initial yaw of the target scene; `same` uses the current yaw directly, while
`sameAzimuth` takes into account the `northOffset` values of both scenes to
maintain the same direction with regard to north.(指定目标场景的偏航，以度为单位。也可以设置为 `same` 或`相同的方位角`。这些设置使用当前场景的当前偏航作为目标场景的初始偏航； `same` 直接使用当前的偏航角，而`sameAzimuth` 考虑到两个场景的 `northOffset` 值保持与北方相同的方向。)
#### `targetHfov` (number)
Specifies the HFOV of the target scene, in degrees. Can also be set to `same`,
which uses the current HFOV of the current scene as the initial HFOV of the
target scene.(以度为单位指定目标场景的 HFOV。也可以设置为`same`，它使用当前场景的当前 HFOV 作为场景的初始 HFOV目标场景。)
#### `id`
Specifies hot spot ID, for use with API's `removeHotSpot` function.(指定热点 ID，用于 API 的“removeHotSpot”函数。)
#### `cssClass` (string)
If specified, string is used as the CSS class for the hot spot instead of the
default CSS classes.(如果指定，字符串将用作热点的 CSS 类，而不是默认 CSS 类。)
#### `createTooltipFunc` (function) and `createTooltipArgs` (object)
If `createTooltipFunc` is specified, this function is used to create the hot
spot tooltip DOM instead of the default function. The contents of
`createTooltipArgs` are passed to the function as arguments.(如果指定了 createTooltipFunc，则此函数用于创建热点spot tooltip DOM 而不是默认函数。的内容`createTooltipArgs` 作为参数传递给函数。)
#### `clickHandlerFunc` (function) and `clickHandlerArgs` (object)
If `clickHandlerFunc` is specified, this function is added as an event handler
for the hot spot's `click` event. The event object and the contents of
`clickHandlerArgs` are passed to the function as arguments.(如果指定了“clickHandlerFunc”，则将此函数添加为事件处理程序
对于热点的“点击”事件。事件对象和内容`clickHandlerArgs` 作为参数传递给函数。)
#### `scale` (boolean)
When `true`, the hot spot is scaled to match changes in the field of view,
relative to the initial field of view. Note that this does not account for
changes in local image scale that occur due to distortions within the viewport.
Defaults to `false`.(当为“true”时，热点会缩放以匹配视野中的变化，
相对于初始视野。请注意，这不考虑由于视口内的扭曲而发生的局部图像比例变化。默认为“false”。)
### `hotSpotDebug` (boolean)
When `true`, the mouse pointer's pitch and yaw are logged to the console when
the mouse button is clicked. Defaults to `false`.(当为 true 时，鼠标指针的俯仰和偏航会记录到控制台单击鼠标按钮。默认为“false”。)
### `sceneFadeDuration` (number)
Specifies the fade duration, in milliseconds, when transitioning between
scenes. Not defined by default. Only applicable for tours. Only works with
WebGL renderer.(指定淡入淡出的持续时间，以毫秒为单位，在两者之间过渡时场景。默认情况下未定义。仅适用于旅游。只适用于WebGL 渲染器。)
### `capturedKeyNumbers` (array)
Specifies the key numbers that are captured in key events. Defaults to the
standard keys that are used by the viewer.(指定在键事件中捕获的键号。默认为查看器使用的标准键。)
### `backgroundColor` ([number, number, number])
Specifies an array containing RGB values [0, 1] that sets the background color
for areas where no image data is available. Defaults to `[0, 0, 0]` (black).
For partial `equirectangular` panoramas this applies to areas past the edges of
the defined rectangle. For `multires` and `cubemap` (including fallback) panoramas
this applies to areas corresponding to missing tiles or faces.(指定一个包含设置背景颜色的 RGB 值 [0, 1] 的数组
对于没有可用图像数据的区域。默认为“[0, 0, 0]”（黑色）。
对于部分“equirectangular”全景图，这适用于超过边缘的区域定义的矩形。对于“multires”和“cubemap”（包括后备）全景图这适用于与缺失的图块或面孔对应的区域。)
### `avoidShowingBackground` (boolean)
If set to `true`, prevent displaying out-of-range areas of a partial panorama
by constraining the yaw and the field-of-view. Even at the corners and edges
of the canvas only areas actually belonging to the image
(i.e., within [`minYaw`, `maxYaw`] and [`minPitch`, `maxPitch`]) are shown,
thus setting the `backgroundColor` option is not needed if this option is set.
Defaults to `false`.(如果设置为“true”，则防止显示部分全景图的超出范围区域通过限制偏航和视野。即使在角落和边缘画布上只有实际属于图像的区域（即，在 [`minYaw`, `maxYaw`] 和 [`minPitch`, `maxPitch`] 中显示），因此，如果设置了此选项，则不需要设置 backgroundColor 选项。默认为“false”)
## `equirectangular` specific options
### `panorama` (string)
Sets the URL to the equirectangular panorama image. This is relative to
`basePath` if it is set, else it is relative to the location of
`pannellum.htm`. An absolute URL can also be used.(将 URL 设置为等距柱状全景图像。这是相对于`basePath` 如果它被设置，否则它是相对于的位置`pannellum.htm`。也可以使用绝对 URL。)
### `haov` (number)
Sets the panorama's horizontal angle of view, in degrees. Defaults to `360`.
This is used if the equirectangular image does not cover a full 360 degrees in
the horizontal.(设置全景图的水平视角（以度为单位）。默认为“360”。如果等距柱状图像未覆盖整个 360 度，则使用此选项横向的。)
### `vaov` (number)
Sets the panorama's vertical angle of view, in degrees. Defaults to `180`. This
is used if the equirectangular image does not cover a full 180 degrees in the
vertical.(设置全景图的垂直视角（以度为单位）。默认为“180”。这个如果等距柱状图像未覆盖整个 180 度，则使用垂直的。)
### `vOffset` (number)
Sets the vertical offset of the center of the equirectangular image from the
horizon, in degrees. Defaults to `0`. This is used if `vaov` is less than `180`
and the equirectangular image is not cropped symmetrically.(设置等距柱状图像中心距地平线，以度为单位。默认为“0”。如果 vaov 小于 180，则使用它并且等距柱状图像未对称裁剪。)
### `ignoreGPanoXMP` (boolean)
If set to `true`, any embedded Photo Sphere XMP data will be ignored; else,
said data will override any existing settings. Defaults to `false`.(如果设置为“true”，任何嵌入的 Photo Sphere XMP数据都将被忽略；别的，所述数据将覆盖任何现有设置。默认为“false”。)
## `cubemap` specific options
### `cubeMap`
This is an array of URLs for the six cube faces in the order front, right,
back, left, up, down. These are relative to `basePath` if it is set, else they
are relative to the location of `pannellum.htm`. Absolute URLs can also be
used. Partial cubemap images may be specified by giving `null` instead of a URL.(这是顺序前面的六个立方体面的 URL 数组，对，向后、向左、向上、向下。如果设置了，这些是相对于 `basePath` 的，否则它们是相对于 `pannellum.htm` 的位置。也可以是绝对网址用过的。可以通过提供“null”而不是 URL 来指定部分立方体贴图图像。)
## `multires` specific options(特定选项)
### `multiRes`(多分辨率`)
This contains information about the multiresolution panorama in sub-keys.(这包含有关子键中的多分辨率全景图的信息。)
#### `basePath` (string)
This is the base path of the URLs for the multiresolution tiles. It is relative
to the regular `basePath` option if it is defined, else it is relative to the
location of `pannellum.htm`. An absolute URL can also be used.(这是多分辨率图块 URL 的基本路径。是相对的如果定义了常规的 basePath 选项，则它是相对于`pannellum.htm` 的位置。也可以使用绝对 URL。)
#### `path` (string)
This is a format string for the location of the multiresolution tiles, relative
to `multiRes.basePath`, which is relative to `basePath`. Format parameters are
`%l` for the zoom level, `%s` for the cube face, `%x` for the x index, and
`%y` for the y index. For each tile, `.extension` is appended.(这是多分辨率图块位置的格式字符串，相对到 `multiRes.basePath`，它是相对于 `basePath` 的。格式参数是`%l` 用于缩放级别，`%s` 用于立方体面，`%x` 用于 x 索引，以及`%y` 代表 y 索引。对于每个图块，附加“.extension”。)
#### `fallbackPath` (string)
This is a format string for the location of the fallback tiles for the CSS 3D
transform-based renderer if the WebGL renderer is not supported, relative
to `multiRes.basePath`, which is relative to `basePath`. The only format
parameter is `%s`, for the cube face. For each face, `.extension` is appended.(这是 CSS 3D 后备图块位置的格式字符串
如果不支持 WebGL 渲染器，则基于转换的渲染器，相对到 `multiRes.basePath`，它是相对于 `basePath` 的。唯一格式参数是“%s”，用于立方体面。对于每张脸，都会附加“.extension”。)
#### `extension` (string)
Specifies the tiles' file extension. Do not include the `.`.(指定图块的文件扩展名。不要包括`.`。)
#### `tileResolution` (number)
This specifies the size in pixels of each image tile.(这指定了每个图像块的像素大小。)
#### `maxLevel` (number)
This specifies the maximum zoom level.(这指定了最大缩放级别。)
#### `cubeResolution` (number)
This specifies the size in pixels of the full resolution cube faces the image
tiles were created from.(这指定全分辨率立方体面向图像的大小（以像素为单位）瓷砖是从创建的。)
## Dynamic content specific options
Currently, only equirectangular dynamic content is supported.(目前，仅支持等距柱状动态内容。)
### `dynamic` (boolean)
The panorama source is considered dynamic when this is set to `true`. Defaults
to `false`. This should be set to `true` for video.(当设置为“true”时，全景源被认为是动态的。默认值为“假”。对于视频，这应该设置为“true”。)
### `dynamicUpdate` (boolean)
For dynamic content, viewer will start automatically updating when set to
`true`. Defaults to `false`. If the updates are controlled via the `setUpdate`
method, as with the Video.js plugin, this should be set to `false`.(对于动态内容，查看器将在设置为时开始自动更新`真实`。默认为“假”。如果更新是通过“setUpdate”控制的方法，与 Video.js 插件一样，应将其设置为“false”。)
## Additional information for tour configuration files(游览配置文件的附加信息)
A tour configuration file contains two top level properties, `default` and
`scenes`. The `default` property contains options that are used for each scene,
but options specified for individual scenes override these options. The
`default` property is required to have a `firstScene` property that contains
the scene ID for the first scene to be displayed. The `scenes` property
contains a dictionary of scenes, specified by scene IDs. The values assigned to
these IDs are specific to each scene.(游览配置文件包含两个顶级属性，`default` 和`场景`。 `default` 属性包含用于每个场景的选项，但是为个别场景指定的选项会覆盖这些选项。这`default` 属性需要具有包含的 `firstScene` 属性要显示的第一个场景的场景 ID。 `scenes` 属性包含场景字典，由场景 ID 指定。分配给的值这些 ID 特定于每个场景。)
四. 简单的单场景DEMO
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pannellum Tests</title>
<link rel="stylesheet" href="../src/css/pannellum.css" />
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#panorama {
width: 100vw;
height: 100vh;
}
.circle{
}
.circle::before{
content: '';
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
animation: loop 1s linear infinite ;
}
@keyframes loop {
0%{
transform: scale(0.5);
background-color: #f00;
}
100%{
transform: scale(1);
background-color: #f50;
}
}
</style>
</head>
<body>
<div id="panorama"></div>
</body>
<script type="text/javascript" src="../src/js/libpannellum.js"></script>
<script type="text/javascript" src="../src/js/pannellum.js"></script>
<script>
viewer = pannellum.viewer('panorama', {
panorama: "../examples/hz.jpg",
autoLoad: true,
autootate: 100,
autoRotate: false,
title: '我是标题',
author: '我是作者',
authorURL: 'https://baidu.com',
strings: '我是字符串',
// basePath : 'https://img1.baidu.com/it/u=360154996,251938831&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500',
// preview : 'https://img1.baidu.com/it/u=360154996,251938831&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500',
fallback: 'https://baidu.com',
orientationOnByDefault: true,
showZoomCtrl: true,
keyboardZoom: false,
mouseZoom: 'fullscreenonly',
draggable: true,
friction: 0.1,
disableKeyboardCtrl: true,
showFullscreenCtrl: true,
showControls: true,
touchPanSpeedCoeffFactor: 10,
yaw: 100,
pitch: 0,
// hfov : 250,
// minYaw : -150,
// minPitch : 90
// maxHfov : 50
compass: false,
previewAuthor : '哈哈哈',
hotSpots : [
{
pitch : 2,
yaw : 10,
type : 'scene',
text : '这是场景热点',
// URL : 'https://baidu.com',
attributes : '',
sceneId : 'sceneID',
targetPitch : 52,
targetYaw : 10,
cssClass : 'circle',
scale : true,
// clickHandlerFunc : function(res){
// const event = window.event || event;
// event.preventDefault();
// console.log(res,'222');
// }
},
{
pitch : 8,
yaw : 10,
type : 'info',
text : '这是信息热点',
// URL : 'https://baidu.com',
targetPitch : 52,
targetYaw : 30,
cssClass : 'circle',
clickHandlerFunc : function(res){
console.log(res,'333');
}
}
], // 热点
});
</script>
</html>
五.多场景DEMO
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pannellum Tests</title>
<link rel="stylesheet" href="../src/css/pannellum.css" />
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#panorama {
width: 100vw;
height: 100vh;
}
.circle {}
.circle::before {
content: '';
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
animation: loop 1s linear infinite;
}
@keyframes loop {
0% {
transform: scale(0.5);
background-color: #f00;
}
100% {
transform: scale(1);
background-color: #f50;
}
}
</style>
</head>
<body>
<div id="panorama"></div>
</body>
<script type="text/javascript" src="../src/js/libpannellum.js"></script>
<script type="text/javascript" src="../src/js/pannellum.js"></script>
<script>
viewer = pannellum.viewer('panorama', {
"default": {
"author": "multires",
"firstScene": "cube",
"autoLoad": true
},
"scenes": {
"cube": {
"title": "cube title",
"type": "cubemap",
"cubeMap": [
"../examples/multires/1/f00.png",
"../examples/multires/1/r00.png",
"../examples/multires/1/b00.png",
"../examples/multires/1/l00.png",
"../examples/multires/1/u00.png",
"../examples/multires/1/d00.png"
],
"hotSpots": [{
"pitch": -12,
"yaw": 170,
"type": "info",
"text": "info test"
},
{
"pitch": -10,
"yaw": -50,
"type": "info",
"text": "link test",
"URL": "https://github.com/mpetroff/pannellum"
},
{
"pitch": 0,
"yaw": -10,
"type": "scene",
"text": "scene test",
"sceneId": "multires"
}
]
},
"equirectangular": {
"title": "equirectangular title",
"panorama": "../examples/examplepano.jpg"
},
"multires": {
"title": "multires title",
"type": "multires",
"hfov": 85,
"multiRes": {
"basePath": "../examples/multires",
// "path": "/%l/%s%x%y",
"fallbackPath": "/fallback/%s",
"extension": "png",
"tileResolution": 256,
"maxLevel": 6,
"cubeResolution": 2048
}
}
}
});
</script>
</html>
类似资料：