鍍金池/ 問(wèn)答/HTML5  HTML/ photo sphere viewer插件開(kāi)啟重力感應(yīng)和vr功能?

photo sphere viewer插件開(kāi)啟重力感應(yīng)和vr功能?

剛開(kāi)始學(xué)習(xí)photo sphere viewer插件,在大神博客都會(huì)看到toggleDeviceOrientation():是否開(kāi)啟重力感應(yīng)方向控制,toggleStereo():是否開(kāi)啟立體效果(可用于WebVR哦)。兩個(gè)可以用于重力感應(yīng)和vr功能的方法,但是在官方文檔中并沒(méi)有看到相關(guān)的案例。自己在PSV配置上添加了 gyroscope選項(xiàng) 在移動(dòng)端也沒(méi)有起作用。至于兩個(gè)方法,我使用psv.toggleDeviceOrientation();也是顯示并沒(méi)有這個(gè)方法。請(qǐng)問(wèn)此插件是否能實(shí)現(xiàn)這個(gè)功能?怎么實(shí)現(xiàn)。十分感謝。

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'
            }
        ]
    });
回答
編輯回答
陌南塵

`
var PSV = new PhotoSphereViewer({

container: photosphere,
panorama: 'image',
size: {
  width: window.innerWidth,
  height: window.innerHeight
},
autoload: true,
allow_scroll_to_zoom: false,
markers: [{
  // 多邊形標(biāo)記
  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()
}

})
`
這樣應(yīng)該可以,但是在安卓機(jī)上效果很差

2017年11月3日 11:00