photo-sphere-viewer是基于three.js和uEvent 2
官网传送门
一、下载插件
npm install photo-sphere-viewer --save
二、使用
<template>
<div id="viewer"></div>
</template>
<script>
import {Viewer} from 'photo-sphere-viewer'
import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import 'photo-sphere-viewer/dist/plugins/markers.css';
export default {
data(){
return{
viewer:'',
imgurl1:require('../assets/one.jpg'),
imgurl2:require('../assets/two.jpg'),
imgurl3:require('../assets/three.jpg'),
}
},
mounted(){
this.viewer = new Viewer({
container:document.querySelector('#viewer'),
panorama:this.imgurl1,
size:{
width: '100vw',
height: '60vh',
},
plugins: [
[MarkersPlugin, {
markers: [
{
id:'circle',
tooltip:'标记1',
circle:30,
svgStyle : {
fill:'rgba(255,255,0,0.3)',
stroke:'yellow',
strokeWidth:'2px',
},
longitude: -1.5,
latitude: -0.28,
anchor: 'center right',
}
],
}],
],
});
const markersPlugin = this.viewer.getPlugin(MarkersPlugin);
markersPlugin.on('select-marker', (e, marker) => {
this.viewer.animate({
longitude: marker.config.longitude,
latitude: marker.config.latitude,
zoom: 100,
speed: '-2rpm',
}).then(() =>
this.viewer.setPanorama(
this.imgurl2
).then(() =>
markersPlugin.updateMarker({
id: marker.id,
longitude: -1.8,
latitude: -0.28,
}),
this.viewer.animate({
zoom: 50,
speed: '2rpm',
}).then(() =>
this.imgurl2 = this.imgurl3,
console.log("继续后面的操作")
)
)
)
});
}
}
</script>
三、常用参数
container(必需的)
类型:HTMLElement | string
包含全景图或元素标识符的HTML元素。container: document.querySelector('.viewer') container: 'viewer' // will target [id="viewer"]
panorama (必需的)
类型: string | string[] | object
全景图像的路径。对于等角的全景图,它必须是单个字符串(我文章使用的就是720°全景图);
对于立方体贴图,它必须是数组或对象(对应六个面)。// Equirectangular panorama : panorama: 'path/to/panorama.jpg' // Cubemap as array (order is important) : panorama: [ 'path/to/left.jpg', 'path/to/front.jpg', 'path/to/right.jpg', 'path/to/back.jpg', 'path/to/top.jpg', 'path/to/bottom.jpg', ] // Cubemap as object : panorama: { left: 'path/to/left.jpg', front: 'path/to/front.jpg', right: 'path/to/right.jpg', back: 'path/to/back.jpg', top: 'path/to/top.jpg', bottom: 'path/to/bottom.jpg', }
plugins
类型: array
启用的插件列表。(如后面会用到的标记插件marker)markers:切换标记 markersList:显示标记列表 gyroscope:陀螺仪切换 stereo:切换立体声视图(VR)
navbar
导航栏的配置:
autorotate :切换自动旋转 zoomOut :放大 zoomRange :缩放滑块 zoomIn :缩小 zoom:zoomOut+ zoomRange+zoomIn download :下载源图像 caption :标题 fullscreen :切换全屏视图
自定义导航栏按钮:
navbar: [ { id: 'my-button',//按钮的唯一标识符,在使用该navbar.getButton()方法时很有用 content: 'Custom',//必需的,按钮内容 title: 'Hello world',//鼠标悬停在按钮上时显示工具提示 className: 'custom-button',//CSS类已添加到按钮 onClick: () => { alert('Hello from custom button');//必需的,单击按钮时调用的函数 } //disabled:false,最初禁用该按钮 //hidden:false,最初隐藏按钮 }, ]