Vue3＋photo-sphere-viewer实现Vr720全景
1.下载photo-sphere-viewer插件
npm i photo-sphere-viewer@4.3.0
注意版本 我这里用的是4.3.0 尽量一致 不然后期会报错
2.话不多说 直接上Vue代码
// 声明盒子
<template>
<div class="vr">
<div id="viewer"></div>
</div>
</template>
// js逻辑
<script setup>
import { ref, onMounted} from "vue";
import { Viewer } from 'photo-sphere-viewer' // 引入插件
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css' //引入CSS样式
let panoramaViewer = null
// 全景图初始化
const initViewer = async function () {
panoramaViewer = new Viewer({
container: document.querySelector('#viewer'), // 容器
panorama: 图片路径,
navbar: [
'autorotate',
'zoom',
'caption',
'fullscreen'
],
plugins: [], // 标记点
size: {
width: '100%',
height: '100%'
}
})
}
onMounted(() => {
initViewer();
})
<script>
这里一定要注意
panorama: 图片路径, 图片路径尽量填写网上的/或者服务器的 不然会报错 可以在百度图片 找一个 做demo
3.最后成果
4.其他测试图
注意：图片来源于网络
- 来自一个向IT行业发展的小白一枚，
- 码字不易 如果对你有帮助还请点个赞
- 资源均来自于网络如有侵权还请联系删除
