VR全景导览开发

作者: 无穷369 | 来源:发表于2019-02-12 17:39 被阅读6次

VR全景导览开发
科技点亮生活—这波操作让您体会到VR4.0时代的真正乐趣！
全景智慧城市：VR全景展示五大权威优势
VR、VR、VR、全景、全景、全景，VR全景不转型很快会被饿死
VR全景智慧城市-720全景、VR全景、3D全景平台加盟
全景推荐 | 龙潭大峡谷来了，VR全景带你清凉一夏！
VR全景购物平台-覆盖各行各业
2018-01-17
VR全景智慧城市，VR城市平台招商，抢占VR全景风口制高点
VR、VR全景、360全景、720全景、3D全景平台加盟——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>