VR全景导览开发

vrimg.jpeg

此DEMO主要使用了photo-sphere-viewer这个库,在此基础上配置参数,再加上自己的逻辑,开发一个全景导览程序要比直接写Three.js代码方便的多。

photo-sphere-viewer官网地址:https://photo-sphere-viewer.js.org/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <link rel="stylesheet" href="photo-sphere-viewer.min.css">
  <title>全景导览DEMO</title>
  <style>
     * {
       margin: 0;
       padding: 0;
       outline: 0;
       letter-spacing:140%;
       font-family: "Microsoft YaHei";
     }
    #container{
       position: fixed;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       width: 100%;
       height: 100%;
       overflow: hidden;
    }
 </style>
</head>
<body>
  <div id="container"></div>
  <script src="three.min.js"></script>
  <script src="doT.min.js"></script>
  <script src="uevent.min.js"></script>
  <script src="D.min.js"></script>
  <script src="DeviceOrientationControls.js"></script>
  <script src="photo-sphere-viewer.min.js"></script>
  <script>
    var PSV = new PhotoSphereViewer({
      panorama: '替换成你自己的全景图片路径',
      container: 'container',
      time_anim: false,//关闭自动旋转
      navbar: false,//关闭导航条
      //loading_img: '',
      move_speed: 0.8,//滑动的速度
      default_fov: 100,//缩放视野
      latitude_range: [Math.PI/4, -Math.PI/4],//上下可滑动范围
      /*markers: [{
        id: 'circle',
        longitude: 2.8955010404014563,
        latitude: 0,
        html: '这是一个标记',
        anchor: 'center center',
        scale: [0.5, 1.5],
        style: {
          maxWidth: '100px',
          color: 'white',
          fontSize: '20px',
          fontFamily: 'Helvetica, sans-serif',
          textAlign: 'center'
        },
        tooltip: {
          content: 'An HTML marker',
          position: 'right'
        }
      }]*/
    });
    /*PSV.on('ready', function() {
      console.log(PSV.isGyroscopeEnabled());
      PSV.startGyroscopeControl();
    });
    PSV.on('select-marker', function (marker) {
      console.log(marker.id)
    });
    PSV.on('position-updated',function(e){
     console.log('经度:'+e.longitude+',纬度:'+e.latitude);
    });*/
  </script>
</body>
</html>

注意

1.一定要部署到服务器才可以看到效果
2.更多参数可以在官方网站上查API
3.DeviceOrientationControls为重力感应组件
4.注释部分为画标记点的内容

为了方便大家学习这里把所用到的js css一并打包

下载地址: https://pan.baidu.com/s/1QB4JdfRcOqGee0xlwV7qiw
提取码: ywkv

推荐阅读更多精彩内容