依赖:npm install photo-sphere-viewer --save-dev
代码:
<template>
<div class="demo-container">
<!-- 测试 -->
<div id="viewer"></div>
</div>
</template>
<script>
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
export default {
data() {
return {
viewer: "",
img: "https://img0.baidu.com/it/u=2063349374,2152739293&fm=253&fmt=auto&app=138&f=JPEG?w=843&h=500",
};
},
mounted() {
this.getViewer();
},
methods: {
getViewer() {
this.viewer = new Viewer({
container: document.getElementById("viewer"),
panorama: this.img,
size: {
width: "886px",
height: "554px",
},
// size: {
// width: screen.availWidth,
// height: screen.availHeight, // 自动全屏 可设置高度 上面注释掉了
// },
});
},
},
};
</script>
<style lang="scss" scoped>
</style>
效果图如下:
如果想要有
场景切换
和自定义标注
这个功能点击下方:
Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房、房间切换和自定义标注(有源码)
感觉文章好的话记得点个赞关注收藏,一键三连,有错的地方麻烦指正一下,多谢!!!