简述:全景效果我们都知道,常用于虚拟场景体验,具体怎么实现,这里给大家推荐一款组件,便于实现全景的真实效果,Photo Sphere;
使用详细:
1、下载依赖;
npm install photo-sphere-viewer --save-dev
2、页面引入;
import PhotoSphereViewer from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
tips: 注意 photo-sphere-viewer 和 @photo-sphere-viewer/core 的区分,下载和引入时不同;
3、然后使用;
<div id="content"></div>
data() {
return {
demoImg:require('../assets/fj.jpg')
};
},
mounted() {
new Viewer({
container:document.querySelector("#content"),
panorama:this.demoImg,
size:{
width:"100px",
height:"80vh",
}
})
},
效果就是当前页面首图,还支持以下功能;
更多,详见官网 :
Photo Spherehttps://photo-sphere-viewer.js.org/
感觉有用,就一键三连,感谢(●'◡'●)