全景效果实现（Photo Sphere，photo-sphere-viewer全景虚拟漫游）

曾经终败给现在 2023-10-04 23:44 29阅读 0赞

![8cb840b36bc84b3295d7934bb014ad00.gif][]

#### 简述：全景效果我们都知道，常用于虚拟场景体验，具体怎么实现，这里给大家推荐一款组件，便于实现全景的真实效果，Photo Sphere； ####

![7d0fff72ab44476ead91e3bcb1209da6.png][]

#### 使用详细： ####

**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",
          }
        })
      },

**效果就是当前页面首图，还支持以下功能；**

**![52b838eab4d347bd94849f6ac7308ce9.png][]**

**更多，详见官网 ：**

[Photo Sphere![icon-default.png_t_N176][]https://photo-sphere-viewer.js.org/][Photo Sphere_icon-default.png_t_N176_https_photo-sphere-viewer.js.org]

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

[8cb840b36bc84b3295d7934bb014ad00.gif]: https://img-blog.csdnimg.cn/8cb840b36bc84b3295d7934bb014ad00.gif
[7d0fff72ab44476ead91e3bcb1209da6.png]: https://img-blog.csdnimg.cn/7d0fff72ab44476ead91e3bcb1209da6.png
[52b838eab4d347bd94849f6ac7308ce9.png]: https://img-blog.csdnimg.cn/52b838eab4d347bd94849f6ac7308ce9.png
[icon-default.png_t_N176]: https://csdnimg.cn/release/blog_editor_html/release2.2.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N176
[Photo Sphere_icon-default.png_t_N176_https_photo-sphere-viewer.js.org]: https://photo-sphere-viewer.js.org/