photo sphere viewer插件开启重力感应和vr功能?

新手上路,请多包涵

刚开始学习photo sphere viewer插件,在大神博客都会看到toggleDeviceOrientation():是否开启重力感应方向控制,toggleStereo():是否开启立体效果(可用于WebVR哦)。两个可以用于重力感应和vr功能的方法,但是在官方文档中并没有看到相关的案例。自己在PSV配置上添加了 gyroscope选项 在移动端也没有起作用。至于两个方法,我使用psv.toggleDeviceOrientation();也是显示并没有这个方法。请问此插件是否能实现这个功能?怎么实现。十分感谢。

var div = document.getElementById('your-pano');
    var x = $('.container').css('width');
    var PSV = new PhotoSphereViewer({
        panorama: 'images/0600.jpg',
        container: div,
        //  启用陀螺仪
        gyroscope:true,
        navbar: true,
        size: {
            width:x,
            height:'400px'
        },

        // list of markers
        markers: [

            {
                // image marker that opens the panel when clicked
                id: 'image',
                longitude: 0.2,
                latitude: -0.13770,
                image: 'images/2.jpg',
                width: 32,
                height: 32,
                anchor: 'bottom center',
                tooltip: 'A image marker. <b>Click me!</b>',
                content: 'Custom',
                onClick: function() {
                    console.log('aaaaaaa');
                }
            },
            {
                // image marker that opens the panel when clicked
                id: 'image1',
                longitude: 0.6,
                latitude: -0.13770,
                image: 'images/2.jpg',
                width: 32,
                height: 32,
                tooltip: 'A image marker. <b>Click me!</b>',
            },
            {
                // html marker with custom style
                id: 'text',
                longitude: 0,
                latitude: 0,
                html: 'HTML <b>marker</b> &hearts;',
                anchor: 'bottom right',
                scale: [0.5, 1.5],
                style: {
                    maxWidth: '100px',
                    color: 'white',
                    fontSize: '20px',
                    fontFamily: 'Helvetica, sans-serif',
                    textAlign: 'center'
                },
                tooltip: {
                    content: document.getElementById('lorem-content').innerHTML,
                    position: 'right'
                }
            },
            {
                // polygon marker
                id: 'polygon',
                polygon_px: [
                    [3184, 794], [3268, 841], [3367, 1194],
                    [3327, 1307], [3065, 1221], [3097, 847]
                ],
                svgStyle: {
                    fill: 'rgba(200, 0, 0, 0.2)',
                    stroke: 'rgba(200, 0, 50, 0.8)',
                    strokeWidth: '2px'
                },
                tooltip: {
                    content: 'A dynamic polygon marker',
                    position: 'right bottom'
                }
            },
            {
                // polyline marker
                id: 'polyline',
                polyline_rad: [
                    [5.924, 0.064], [5.859, -0.061], [5.710, -0.132],
                    [5.410, -0.287], [4.329, -0.490], [3.838, -0.370], [3.725, -0.241]
                ],
                svgStyle: {
                    stroke: 'rgba(140, 190, 10, 0.8)',
                    strokeLinecap: 'round',
                    strokeLinejoin: 'round',
                    strokeWidth: '10px'
                },
                tooltip: 'A dynamic polyline marker'
            },
            {
                // circle marker
                id: 'circle',
                circle: 20,
                x: 2500,
                y: 1000,
                tooltip: 'A circle marker'
            }
        ]
    });
阅读 8.4k
3 个回答

`
var PSV = new PhotoSphereViewer({

container: photosphere,
panorama: 'image',
size: {
  width: window.innerWidth,
  height: window.innerHeight
},
autoload: true,
allow_scroll_to_zoom: false,
markers: [{
  // 多边形标记
  id: 'polygon',
  polygon_px: [3184, 794, 3268, 841, 3367, 1194, 3327, 1307, 3065, 1221, 3097, 847],
  svgStyle: {
    fill: 'rgba(200, 0, 0, 0.2)',
    stroke: 'rgba(200, 0, 50, 0.8)',
    'stroke-width': '2px'
  },
  tooltip: {
    content: 'A dynamic polygon marker',
    position: 'right bottom'
  }
}],
onready: function(){
  PSV.toggleDeviceOrientation()
}

})
`
这样应该可以,但是在安卓机上效果很差

新手上路,请多包涵
PhotoSphereViewer.prototype.toggleGyroscopeControl = function() {
  if (this.isGyroscopeEnabled()) {
    this.stopGyroscopeControl();
  }
  else {
    this.startGyroscopeControl();
  }
};

用以上三个方法

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题