简介
最新小编在了解全景图相关的知识。小编想通过该篇文章带大家一起开箱PhotoSphereViewer框架。
PhotoSphereViewer框架是基于Three.js二次封装的一个显示Photo Sphere全景照片的JavaScript库。从目前小编的学习情况来看，小编觉得这个框架挺强大的，是值得大家玩一玩的插件，万一哪天有类似的需求对吧。
利用PhotoSphereViewer框架我们可以做些什么呢？
从动图中我们可以看到我们在一个div里面进行图片视区的切换，类似我们在操控一台摄像机的视角，从而观察图片里的不同位置的具体内容，并且我们可以在图片里面绘制想要的区域，并对绘制区域添加了相关的内容描述。
但是这个插件给我们提供的不仅仅只有这点东西，读者可以根据自己的需求去了解该插件给我们提供的其他内容。该篇文章主要是带大家开箱该插件，确保大家能顺利用上。
官方文档： photo-sphere-viewer.js.org/
PhotoSphereViewer开箱使用
插件引用
- npm 安装
npm install photo-sphere-viewer
- 直接导入
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
这里小编使用的是npm安装。
插件使用
- HTML和CSS部分
<div id="viewer"></div>
// 全景图的根节点必须要具备宽高
<style>
#viewer {
width: 100vw;
height: 50vh;
}
</style>
- 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参考
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可传的参数：
| Name | Type | Argument | Description |
|---|---|---|---|
| speed | number|string | animation speed or duration (in milliseconds) | |
| zoom | number | optional | new zoom level between 0 and 100 |
viewer.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可选的参数配置
| Name | Type | Argument | Description |
|---|---|---|---|
| width | string | 单位可以是px,%或者auto | |
| height | string | 单位可以是px,%或者auto |
viewer.resize({
width: '2000px',
height: '1000px'
});
rotate(Object position)
将视图转到特定的经纬度。可以用球坐标（弧度或度数）或纹理坐标（px）表示位置。
| Name | Type | Argument | Description |
|---|---|---|---|
| longitude | number | ||
| latitude | number | ||
| x | number | ||
| y | number |
viewer.rotate({
longitude: 3.493520870365421,
latitude: 0.0863177810938982
});
viewer.rotate({
x: 229,
y: 968
});
setOption(option, value)
更改Viewer的配置项，其中某些配置项不能被改变。
| Name | Type | Decription |
|---|---|---|
| option | string | panorama, panoData, container, plugins不能被改变 |
| value | any |
option可配置的参数：
| Name | Type | default | Decription |
|---|---|---|---|
| caption | string | 显示在导航栏中的文本。如果导航栏被禁用，它将一直显示，但没有按钮。允许HTML。 | |
| loadingImg | string | 显示在全景图刚加载时loading圆的图像的路径。 | |
| loadingTxt | string | Loading... | 显示在全景图刚加载时loading圆中心的文本，仅在未配置loadingImg时有效。 |
| size | object | 全景图容器的最终大小，默认情况下使用的是人根结点的容器大小。在调整窗口大小的时候也会遵循该配置的大小。 | |
| fisheye | boolean|double | false | 鱼眼模式，该模式会对markers标记物产生副作用。使用true启用鱼眼效果或指定效果强度(true = 1.0) |
| minFov | integer | 30 | 最小视野，介于1和179之间。最小视野大小应该小于最大视野大小。 |
| maxFov | integer | 90 | 最大视野，介于1和179之间。最大视野大小应该大于最小视野大小。 |
| defaultZoomLvl | integer | 50 | 默认的缩放层级。介于0（最大视野）和100（最小视野）之间。 |
| defaultLong | double | string | 0 | 视图加载时的默认的定位经度，介于0到2π之间 |
| defaultLat | double | string | 0 | 视图加载时的默认的定位维度，介于-π/2到π/2之间 |
| sphereCorrection | { pan: double, tilt: double, roll: double } | { pan:0, tilt:0, roll: 0 } | 球体旋转角度，以弧度为单位。pan: 绕x轴旋转，titl:绕y轴旋转，roll：绕z轴旋转。 |
| moveSpeed | double | 1 | 手动滑动的速度增加的倍数 |
| zoomButtonIncrement | double | 2 | 使用键盘或导航栏按钮时缩放增量。 |
| autorotateDelay | integer | null | 用于定义自动旋转开始的延迟（毫秒）。暂时亲测不生效 |
| autorotateSpeed | string | 2rpm | 自动旋转的速度。单位为rpm。 |
| autorotateLat | double | string | defaultLat | 执行自动旋转的纬度。 |
| moveInertia | boolean | true | 在手动移动后启用平滑动画。(滑动全景图停下来之后的惯性) |
| mousewheel | boolean | true | 是否使用鼠标滚轮进行缩放。 |
| mousewheelSpeed | double | 1 | 使用鼠标滚轮时的缩放速度。 |
| mousemove | boolean | true | 是否使用鼠标光标来进行全景旋转。 |
| captureCursor | boolean | false | 只需在视图上方移动光标，而不是单击+移动，即可旋转全景。 |
| touchmoveTwoFingers | boolean | false | 需要两个手指才能旋转全景图。如果启用，当仅检测到一次触摸时，会显示出要求用户使用两个手指的信息覆盖物。注意：该配置在PC端配置无效。 |
| useXmpData | boolean | true | 从XMP数据中读取真实图像大小，如果在拍摄后裁剪了全景图，则必须保持为真。 |
| withCredentials | boolean | false | 对HTTP请求使用资格证书credentials |
| navbar | array | ['autorotate', 'zoomOut', 'zoomRange', 'zoomIn', 'download', 'caption', 'fullscreen'] | 导航栏按钮的配置。除默认配置之外，导航栏也允许自定义添加按钮。 |
| lang | object | lang: { 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',} | 全景图里的各种文字提示内容。比如导航栏按钮的描述内容。 |
| keyboard | boolean|object | keyboard: { '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)
加载新的全景文件，可以选择更改相机位置/缩放并激活过渡动画。如果“相机”选项未定义，则“相机”选项将不继续移动。如果另一个全景文件加载已经在进行中，它将被中止。
| Name | Type | Description |
|---|---|---|
| path | string|Array|PSV.Cubemap | 全景图文件的地址 |
| options | object: PanoramaOptions |
| Name | Type | Argument | Default | Desctiption |
|---|---|---|---|---|
| transition | boolean | number | 1500 | 所有全景和新全景之间过渡的持续时间 | |
| showLoader | boolean | true | show the loader | |
| sphereCorrection | object | 应用于全景的新球体校正 | ||
| panoData | object | 新全景图的panoData |
由于该Api亲测无效，具体内容就不展开了。之后看看官网会不会更新。
showError(message)
在视图的最上层显示错误信息遮罩层。
| Name | Type | Description |
|---|---|---|
| message | string |
viewer.showError('我是一段错误信息');
hideError()
隐藏错误信息。
viewer.hideError();
startAutorotate()
启用全景自动旋转。
viewer.startAutorotate();
stopAutorotate()
停止全景自动旋转。
viewer.stopAutorotate();
startKeyboardControl()
启用键盘控件，即可以使用键盘快捷键进行全景图一些动作操作。（在全景图进入全屏模式时会自动开启键盘控件）。
viewer.startKeyboardControl();
stopKeyboardControl()
禁用键盘控件。（在全屏模式退出时也会自动禁用键盘控件）
viewer.stopKeyboardControl()
toggleAutorotate()
开始或停止全景图自动旋转。当全景图在旋转时则停止，当全景图不旋转时则开启旋转。
viewer.toggleAutorotate();
toggleFullscreen()
进入或退出全屏模式。当全景图开启全屏时则退出全屏，当全景图非全屏时则进入全屏模式。
viewer.toggleFullscreen();
zoom(level)
| Name | Type | Description |
|---|---|---|
| level | number | 缩放层级进行调整，层级数介于0-100之间 |
viewer.zoom(100);
zoomIn()
层级缩放+1。
viewer.zoomIn();
zoomOut()
层级缩放-1。
viewer.zoomOut();
