Vue使用photo-sphere-viewer全景插件模拟VR

 

photo-sphere-viewer

photo-sphere-viewer是基于three.js和uEvent 2

下载插件

使用npm或yarn下载安装

npm install photo-sphere-viewer

yarn add photo-sphere-viewer

使用插件

<template>
  <div class="showCanvas" id="viewer"></div>
</template>
<script>
    import {Viewer} from 'photo-sphere-viewer'
    import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
    export default {
        data(){
            return{
                // 基地全景图
                viewer: '',
                imgurl: require('./quanjing.jpg'),
            }
        },
        methods:{
            // 全景图
            initPhotoSphere () {
            this.viewer = new Viewer({
            container: document.querySelector('#viewer'),
            panorama: this.imgurl,
            navbar: ['autorotate', 'zoom', 'caption', 'fullscreen'],
            size: {
             width: '70vw',
             height: '55vh'
            }
            })
           };
        mounted () {
           this.initPhotoSphere()
        },
          }
        }
</script>

配置参数

container（必需的）
类型：HTMLElement | string
包含全景图或元素标识符的HTML元素。

container: document.querySelector('.viewer')
container: 'viewer' // will target [id="viewer"]

panorama （必需的）
类型： string | string[] | object
全景图像的路径。对于等角的全景图，它必须是单个字符串（我文章使用的就是720°全景图）；
对于立方体贴图，它必须是数组或对象（对应六个面）。

// Equirectangular panorama :
panorama: 'path/to/panorama.jpg'

// Cubemap as array (order is important) :
panorama: [
  'path/to/left.jpg', 'path/to/front.jpg',
  'path/to/right.jpg', 'path/to/back.jpg',
  'path/to/top.jpg', 'path/to/bottom.jpg',
]

// Cubemap as object :
panorama: {
  left:   'path/to/left.jpg',  front:  'path/to/front.jpg',
  right:  'path/to/right.jpg', back:   'path/to/back.jpg',
  top:    'path/to/top.jpg',   bottom: 'path/to/bottom.jpg',
}

plugins
类型： array
启用的插件列表。（如后面会用到的标记插件marker）

markers：切换标记
markersList：显示标记列表
gyroscope：陀螺仪切换
stereo：切换立体声视图（VR）

caption
类型： string
导航栏中显示的文本。如果导航栏被禁用，它将一直显示，但没有按钮。允许使用HTML。
size
类型： { width: integer, height: integer }
最终大小（如果为全景图容器）。默认情况下，container使用的大小，并在调整窗口大小时遵循。
navbar
导航栏的配置。

autorotate ：切换自动旋转
zoomOut ：放大
zoomRange ：缩放滑块
zoomIn ：缩小
zoom：zoomOut+ zoomRange+zoomIn
download ：下载源图像
caption ：标题
fullscreen ：切换全屏视图

自定义导航栏按钮：

 navbar: [
    {
      id: 'my-button',//按钮的唯一标识符，在使用该navbar.getButton()方法时很有用
      content: 'Custom',//必需的,按钮内容
      title: 'Hello world',//鼠标悬停在按钮上时显示工具提示
      className: 'custom-button',//CSS类已添加到按钮
      onClick: () => {
        alert('Hello from custom button');//必需的,单击按钮时调用的函数
      }
      //disabled:false,最初禁用该按钮
      //hidden:false,最初隐藏按钮
    },
  ]

更多参数参考官网