插件网站
https://photo-sphere-viewer.js.org/
DEMO代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/gyroscope.js"></script>
<style>
/* the viewer container must have a defined size */
#viewer {
width: 100vw;
height: 50vh;
}
</style>
</head>
<body>
<div id="viewer"></div>
<script>
var viewer = new PhotoSphereViewer.Viewer({
container: document.querySelector('#viewer'),
panorama: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594128842717&di=571415a4f33d406a12ad468d9ec01282&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
lang: {
gyroscope : 'Gyroscope',
},
plugins: [
PhotoSphereViewer.GyroscopePlugin,
]
});
</script>
</body>
</html>
</html>