admin 插件资讯 2023-01-01

Photo Sphere Viewer全景图插件开箱

简介

最新小编在了解全景图相关的知识。小编想通过该篇文章带大家一起开箱PhotoSphereViewer框架。

PhotoSphereViewer框架是基于Three.js二次封装的一个显示Photo Sphere全景照片的JavaScript库。从目前小编的学习情况来看，小编觉得这个框架挺强大的，是值得大家玩一玩的插件，万一哪天有类似的需求对吧。

利用PhotoSphereViewer框架我们可以做些什么呢？

从动图中我们可以看到我们在一个div里面进行图片视区的切换，类似我们在操控一台摄像机的视角，从而观察图片里的不同位置的具体内容，并且我们可以在图片里面绘制想要的区域，并对绘制区域添加了相关的内容描述。

但是这个插件给我们提供的不仅仅只有这点东西，读者可以根据自己的需求去了解该插件给我们提供的其他内容。该篇文章主要是带大家开箱该插件，确保大家能顺利用上。

官方文档：photo-sphere-viewer.js.org/

PhotoSphereViewer开箱使用插件引用npm 安装npm install photo-sphere-viewer复制代码直接导入复制代码

这里小编使用的是npm安装。

插件使用HTML和CSS部分// 全景图的根节点必须要具备宽高 #viewer { width: 100vw; height: 50vh; }复制代码JavaScript部分import { Viewer } from ‘photo-sphere-viewer’;// 必须引入官方提供的样式文件import ‘photo-sphere-viewer/dist/photo-sphere-viewer.css’;import image from ‘./assets/2294472375_24a3b8ef46_o.jpg’;const viewer = new Viewer({ // 全景图根节点 container: document.querySelector(‘#viewer’); // 全景图图片路径 panorama: image;})复制代码

如果代码没有写错，一个全景图实例就已经被创建出来啦，这样子我们就可以开始愉快的使用官方提供的Viewer实例下的各种api了。

这里小编给大家提供两张练习使用的全景图，大家有需要自取即可。

结语

至于该框架的实现原理及各种专业术语的含义，大家有兴趣的话自己去了解，这里小编其实也是学了个一知半解，对于原理并不是很明白，大家可以从three.js和WebGL相关知识入手，可以更好的理解该框架的实现原理。当然有什么疑问也可以留言问我，说不定我回答得上来嘿嘿嘿。祝大家玩的愉快。下面是我根据官方提供的api文档进行了实操并进行稍微的整理，大家有需要可以参考参考。

api参考

Photo Sphere Viewer

Viewer实例下的全部方法实操。

// 使用Photo Sphere Viewer必须引入相应的样式import ‘photo-sphere-viewer/dist/photo-sphere-viewer.css’;// marker插件的样式(如果有使用到插件就必须引入)import ‘photo-sphere-viewer/dist/plugins/markers.css’;const viewer = new Viewer({ container: document.querySelector(‘#container’), // 全景图 panorama: ‘http://*******.jpg’,});复制代码animate(Object options)

使用平滑的过度效果进行视图的缩放

options可传的参数：

NameTypeArgumentDescriptionspeednumber|stringanimation speed or duration (in milliseconds)zoomnumberoptionalnew zoom level between 0 and 100viewer.animate({ speed: 2000, zoom：88});复制代码stopAnimation()

停止正在进行的动画。由于动画的停止是异步的，因此该方法会返回一个Promise。

viewer.stopAnimation().then(() => { // 此处写自己想要写的业务})复制代码destroy()

销毁全景图viewer。目前该方法没办法完全清除内部使用的THREE框架上下文使用的内存。

viewer.destory();复制代码enterFullscreen()

进入全屏模式

viewer.enterFullscreen();复制代码exitFullscreen()

退出全屏模式

viewer.exitFullscreen();复制代码getPlugin(pluginId)

加载Photo Sphere Viewer 提供的其他插件，插件必须是官方提供的。该方法会返回插件的实例（如果存在）

import MarkersPlugin from ‘photo-sphere-viewer/dist/plugins/markers.js’;import { Viewer } from ‘photo-sphere-viewer’;const viewer = new Viewer();const plugin = viewer.getPlugin(MarkersPlugin);复制代码getPosition()

获取相机的当前位置

const position = viewer.getPosition();console.log(position);// { latitude: 0, longitude: 0 }复制代码getSize()

获取当前查看器的宽度和高度的大小，会随着当前可视的container大小的改变而改变。

const size = viewer.getSize();console.log(size);// { width: 762, height: 640 }复制代码getZoomLevel()

获取当前缩放层级

const level = viewer.getZoomLevel();console.log(level);// 50复制代码isAutorotateEnabled()

检查是否启用了自动旋转,如果在自动旋转为true,反之则为false

const isAutorotate = viewer.isAutorotateEnabled();console.log(isAutorotate);// false复制代码isFullscreenEnabled()

检查是否开启全屏，全屏为true，反之则为false

const isFullScreen = viewer.isFullscreenEnabled();console.log(isFullScreen);// false复制代码needsUpdate()

为下一次渲染标记视图已更改（用途未知）

viewer.needsUpdate();复制代码refreshUi()

刷新界面（用法未知）

viewer.refreshUi();复制代码resize(Object size)

调整全景图查看窗口的大小, 以下是size可选的参数配置

NameTypeArgumentDescriptionwidthstring单位可以是px,%或者autoheightstring单位可以是px,%或者autoviewer.resize({ width: ‘2000px’, height: ‘1000px’});复制代码rotate(Object position)

将视图转到特定的经纬度。可以用球坐标（弧度或度数）或纹理坐标（px）表示位置。

NameTypeArgumentDescriptionlongitudenumberlatitudenumberxnumberynumberviewer.rotate({ longitude: 3.493520870365421, latitude: 0.0863177810938982});复制代码viewer.rotate({ x: 229, y: 968});复制代码setOption(option, value)

更改Viewer的配置项，其中某些配置项不能被改变。

NameTypeDecriptionoptionstringpanorama, panoData, container, plugins不能被改变valueany

option可配置的参数：

NameTypedefaultDecriptioncaptionstring显示在导航栏中的文本。如果导航栏被禁用，它将一直显示，但没有按钮。允许HTML。loadingImgstring显示在全景图刚加载时loading圆的图像的路径。loadingTxtstringLoading…显示在全景图刚加载时loading圆中心的文本，仅在未配置loadingImg时有效。sizeobject全景图容器的最终大小，默认情况下使用的是人根结点的容器大小。在调整窗口大小的时候也会遵循该配置的大小。fisheyeboolean|doublefalse鱼眼模式，该模式会对markers标记物产生副作用。使用true启用鱼眼效果或指定效果强度(true = 1.0)minFovinteger30最小视野，介于1和179之间。最小视野大小应该小于最大视野大小。maxFovinteger90最大视野，介于1和179之间。最大视野大小应该大于最小视野大小。defaultZoomLvlinteger50默认的缩放层级。介于0（最大视野）和100（最小视野）之间。defaultLongdouble | string0视图加载时的默认的定位经度，介于0到2π之间defaultLatdouble | string0视图加载时的默认的定位维度，介于-π/2到π/2之间sphereCorrection{ pan: double, tilt: double, roll: double }{ pan:0, tilt:0, roll: 0 }球体旋转角度，以弧度为单位。pan: 绕x轴旋转，titl:绕y轴旋转，roll：绕z轴旋转。moveSpeeddouble1手动滑动的速度增加的倍数zoomButtonIncrementdouble2使用键盘或导航栏按钮时缩放增量。autorotateDelayintegernull用于定义自动旋转开始的延迟（毫秒）。暂时亲测不生效autorotateSpeedstring2rpm自动旋转的速度。单位为rpm。autorotateLatdouble | stringdefaultLat执行自动旋转的纬度。moveInertiabooleantrue在手动移动后启用平滑动画。(滑动全景图停下来之后的惯性)mousewheelbooleantrue是否使用鼠标滚轮进行缩放。mousewheelSpeeddouble1使用鼠标滚轮时的缩放速度。mousemovebooleantrue是否使用鼠标光标来进行全景旋转。captureCursorbooleanfalse只需在视图上方移动光标，而不是单击+移动，即可旋转全景。touchmoveTwoFingersbooleanfalse需要两个手指才能旋转全景图。如果启用，当仅检测到一次触摸时，会显示出要求用户使用两个手指的信息覆盖物。注意：该配置在PC端配置无效。useXmpDatabooleantrue从XMP数据中读取真实图像大小，如果在拍摄后裁剪了全景图，则必须保持为真。withCredentialsbooleanfalse对HTTP请求使用资格证书credentialsnavbararray[‘autorotate’, ‘zoomOut’, ‘zoomRange’, ‘zoomIn’, ‘download’, ‘caption’, ‘fullscreen’]导航栏按钮的配置。除默认配置之外，导航栏也允许自定义添加按钮。langobjectlang: { autorotate: ‘Automatic rotation’, zoom : ‘Zoom’, zoomOut : ‘Zoom out’, zoomIn : ‘Zoom in’, download : ‘Download’,fullscreen: ‘Fullscreen’, menu: ‘Menu’, twoFingers: [‘Use two fingers to navigate’], loadError : ‘The panorama can’t be loaded’,}全景图里的各种文字提示内容。比如导航栏按钮的描述内容。keyboardboolean|objectkeyboard: { ‘ArrowUp’: ‘rotateLatitudeUp’, ‘ArrowDown’: ‘rotateLatitudeDown’, ‘ArrowRight’: ‘rotateLongitudeRight’, ‘ArrowLeft’: ‘rotateLongitudeLeft’, ‘PageUp’: ‘zoomIn’, ‘PageDown’: ‘zoomOut’, ‘+’: ‘zoomIn’, ‘-‘: ‘zoomOut’, ‘ ‘: ‘toggleAutorotate’ }在视图全屏时启用和配置键盘导航。讲人话就是在视图全屏时的键盘快捷键配置。viewer.setOption(‘fisheye’, true);复制代码setOptions(options)

更改多个Viewer的配置项，其中某些配置项不能被改变。配置项参考setOption()的附带配置表。

viewer.setOption({ fisheye： true, defaultZoomLvl: 60});复制代码setPanorama(path, options)

加载新的全景文件，可以选择更改相机位置/缩放并激活过渡动画。如果“相机”选项未定义，则“相机”选项将不继续移动。如果另一个全景文件加载已经在进行中，它将被中止。

NameTypeDescriptionpathstring|Array|PSV.Cubemap全景图文件的地址optionsobject: PanoramaOptionsNameTypeArgumentDefaultDesctiptiontransitionboolean | number1500所有全景和新全景之间过渡的持续时间showLoaderbooleantrueshow the loadersphereCorrectionobject应用于全景的新球体校正panoDataobject新全景图的panoData

由于该Api亲测无效，具体内容就不展开了。之后看看官网会不会更新。

showError(message)

在视图的最上层显示错误信息遮罩层。

NameTypeDescriptionmessagestringviewer.showError(‘我是一段错误信息’);复制代码hideError()

隐藏错误信息。

viewer.hideError();复制代码startAutorotate()

启用全景自动旋转。

viewer.startAutorotate();复制代码stopAutorotate()

停止全景自动旋转。

viewer.stopAutorotate();复制代码startKeyboardControl()

启用键盘控件，即可以使用键盘快捷键进行全景图一些动作操作。（在全景图进入全屏模式时会自动开启键盘控件）。

viewer.startKeyboardControl();复制代码stopKeyboardControl()