实现VR视觉效果

最新推荐文章于 2024-07-20 09:27:05 发布

-陈福城-

最新推荐文章于 2024-07-20 09:27:05 发布

阅读量91

点赞数

文章标签： vr

本文链接：https://blog.csdn.net/qq_67357048/article/details/130840722

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PhotoSphereViewer - equirectangular demo</title>
 
  <link rel="stylesheet" href="https://my.weblf.cn/alone_page/360vr/css/photo-sphere-viewer.min.css">
 
  <style>
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
 
    #photosphere {
      width: 100%;
      height: 100%;
    }
 
    .psv-button.custom-button {
      font-size: 22px;
      line-height: 20px;
    }
 
    .demo-label {
      color: white;
      font-size: 20px;
      font-family: Helvetica, sans-serif;
      text-align: center;
      padding: 5px;
      border: 1px solid white;
      background: rgba(0,0,0,0.4);
    }
  </style>
</head>
<body>
 
<div id="photosphere"></div>
 

<script src="https://my.weblf.cn/alone_page/360vr/js/three.min.js"></script>
<script src="https://my.weblf.cn/alone_page/360vr/js/polyfill.js"></script>
<script src="https://my.weblf.cn/alone_page/360vr/js/uevent.min.js"></script>
<script src="https://my.weblf.cn/alone_page/360vr/js/doT.min.js"></script>
<script src="https://my.weblf.cn/alone_page/360vr/js/NoSleep.js"></script>
<script src="https://my.weblf.cn/alone_page/360vr/js/DeviceOrientationControls.js"></script>
<script src="https://my.weblf.cn/alone_page/360vr/js/StereoEffect.js"></script>
<script src="https://my.weblf.cn/alone_page/360vr/js/photo-sphere-viewer.js"></script>
 

<script type="text/template" id="pin-content">
  <h1>来自cfc的礼物</h1>
 
  <p><strong>欢迎来到成职院</strong></p>
  <pre><code>

</code></pre>
</script>
<svg id="patterns">
  <defs>
    <pattern id="dots" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" style="stroke: none; fill: rgba(255,0,0,0.4)"/>
    </pattern>
    <pattern id="points" x="10" y="10" width="15" height="15" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="0.8" style="stroke: none; fill: red"/>
    </pattern>
  </defs>
</svg>
 
<script>
  var panos = [
    {
      url: 'https://img.zcool.cn/community/01ahpjmphxigmiprjypgha3939.jpg?x-oss-process=image/format,webp/quality,q_100',
      desc: 'Bryce Canyon National Park <b>© Mark Doliner</b>',
      target: {
        longitude: 3.848,
        latitude: -0.244,
        zoom: 50
      }
    }, {
      url: 'https://i.ibb.co/p4hHp1s/222.jpg',
      desc: 'Bryce Canyon National Park <b>© Jess Beauchemin</b>',
      target: {
        longitude: 3.715,
        latitude: 0.574,
        zoom: 50
      }
    }
  ];
 
  var PSV = new PhotoSphereViewer({
    container: 'photosphere', 
    panorama: panos[0].url, 
    caption: panos[0].desc, 
    loading_img: '', 
    longitude_range: [-7 * Math.PI / 8, 7 * Math.PI / 8], 
    latitude_range: [-3 * Math.PI / 4, 3 * Math.PI / 4], 
    anim_speed: '-2rpm', 
    default_fov: 50, 
    fisheye: true, 
    move_speed: 1.1, 
    time_anim: false, 

    navbar: [ 
      'gyroscope'
    ],
   
    markers: (function() {
      var a = [];
      return a;
    }())
  });
  PSV.on('over-marker', function(marker) { //划过
    console.log('over', marker.id);
  });
 
  PSV.on('leave-marker', function(marker) { //离开
    console.log('leave', marker.id);
  });
 
  PSV.on('select-marker-list', function(marker) {
    console.log('select-list', marker.id);
  });
 
  PSV.on('goto-marker-done', function(marker) {
    console.log('goto-done', marker.id);
  });
</script>
 
<script>
  document.write('<script src="//' + location.host.split(':')[0] + ':35729/livereload.js" async defer><' + '/script>');
</script>
</body>
</html>