淘先锋技术网

首页 1 2 3 4 5 6 7

 

简述:全景效果我们都知道,常用于虚拟场景体验,具体怎么实现,这里给大家推荐一款组件,便于实现全景的真实效果,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/

感觉有用,就一键三连,感谢(●'◡'●)