近兩年隨著VR的火熱合砂，市面上也出現(xiàn)了很多購房和二手房軟件小程序出現(xiàn)了VR看房功能且蓬，實現(xiàn)足不出戶就能親身體驗岩遗，那么類似這樣的功能是怎么實現(xiàn)的呢跌捆？
今天阿七就和大家一起來學習一下360°×180°全景插件photo-sphere-viewer和他的插件（這里只用到標記插件Markers）
photo-sphere-viewer
photo-sphere-viewer是基于three.js和uEvent 2
下載插件
使用npm或yarn下載安裝
npm install photo-sphere-viewer
yarn add photo-sphere-viewer
或者手動通過promise-polyfill下載安裝
使用
<template>
<div id="viewer"></div>
</template>
<script>
import {Viewer} from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
export default {
data(){
return{
viewer:'',
imgurl1:require('../assets/1.jpg'),
}
},
mounted(){
this.viewer = new Viewer({
container:document.querySelector('#viewer'),
panorama:this.imgurl1,
size:{
width: '100vw',
height: '50vh',
},
});
}
}
</script>
常用參數(shù)
container（必需的）
類型：HTMLElement | string
包含全景圖或元素標識符的HTML元素钧敞。
container: document.querySelector('.viewer')
container: 'viewer' // will target [id="viewer"]
panorama （必需的）
類型： string | string[] | object
全景圖像的路徑锅必。對于等角的全景圖伐脖，它必須是單個字符串（我文章使用的就是720°全景圖）介粘；
對于立方體貼圖秉犹，它必須是數(shù)組或?qū)ο螅▽鶄€面）蛉谜。
// 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）
caption
類型： string
導航欄中顯示的文本崇堵。如果導航欄被禁用型诚，它將一直顯示，但沒有按鈕鸳劳。允許使用HTML狰贯。
size
類型： { width: integer, height: integer }
最終大小（如果為全景圖容器）赏廓。默認情況下涵紊，container使用的大小，并在調(diào)整窗口大小時遵循幔摸。
navbar
導航欄的配置摸柄。
autorotate ：切換自動旋轉(zhuǎn)
zoomOut ：放大
zoomRange ：縮放滑塊
zoomIn ：縮小
zoom：zoomOut+ zoomRange+zoomIn
download ：下載源圖像
caption ：標題
fullscreen ：切換全屏視圖
自定義導航欄按鈕：
navbar: [
{
id: 'my-button',//按鈕的唯一標識符，在使用該navbar.getButton()方法時很有用
content: 'Custom',//必需的,按鈕內(nèi)容
title: 'Hello world',//鼠標懸停在按鈕上時顯示工具提示
className: 'custom-button',//CSS類已添加到按鈕
onClick: () => {
alert('Hello from custom button');//必需的,單擊按鈕時調(diào)用的函數(shù)
}
//disabled:false,最初禁用該按鈕
//hidden:false,最初隱藏按鈕
},
]
更多參數(shù)參考官網(wǎng)
Markers插件
官方插件（在左側(cè)菜單中列出）可在目錄photo-sphere-viewer內(nèi)的主軟件包中找到dist/plugins既忆。一些插件還具有其他CSS文件驱负。
導入
import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
import 'photo-sphere-viewer/dist/plugins/markers.css';
使用
所有插件均包含一個JavaScript類嗦玖，該類必須提供給plugins數(shù)組。一些插件還將采用嵌套數(shù)組中提供的配置對象电媳。
this.viewer = new Viewer({
container:document.querySelector('#viewer'),
panorama:this.imgurl1,
size:{
width: '100vw',
height: '50vh',
},
plugins: [
[MarkersPlugin, {
markers: [
{
id:'circle',
tooltip:'A circle of radius 30',
circle:30,
svgStyle : {
fill:'rgba(255,255,0,0.3)',
stroke:'yellow',
strokeWidth:'2px',
},
longitude: -1.5,
latitude: -0.28,
anchor: 'center right',
}
],
}],
],
});
初始化之后踏揣，可以使用getPlugin方法獲得插件實例，從而允許在插件上調(diào)用方法并訂閱事件匾乓。
const markersPlugin = this.viewer.getPlugin(MarkersPlugin);
markersPlugin.on('something', () => {
/* ... */
});
點擊查看更多標記插件的參數(shù)方法
最終效果
最終代碼
<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/1.jpg'),
imgurl2:require('../assets/2.jpg'),
imgurl3:require('../assets/3.jpg'),
}
},
mounted(){
this.viewer = new Viewer({
container:document.querySelector('#viewer'),
panorama:this.imgurl1,
size:{
width: '100vw',
height: '50vh',
},
plugins: [
[MarkersPlugin, {
markers: [
{
id:'circle',
tooltip:'A circle of radius 30',
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("繼續(xù)操作")
)
)
)
});
}
}
</script>
最終效果
由于GIF過大捞稿，壓縮后效果欠佳，但不影響功能展示拼缝，建議自行運行一次
素材圖片
注：圖片來源網(wǎng)絡
