刚开始学习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> ♥',
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({
})
`
这样应该可以,但是在安卓机上效果很差