在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例Ajax框架/RIA → 720web全景demo

720web全景demo

Ajax框架/RIA

下载此实例
  • 开发语言:js
  • 实例大小:27.53M
  • 下载次数:16
  • 浏览次数:130
  • 发布时间:2021-01-04
  • 实例类别:Ajax框架/RIA
  • 发 布 人:135792468
  • 所需积分:2
 相关标签: demo web 720 20 全景 Javascript

实例介绍

【实例简介】

 720度web全景展示,需要放到iis,或tomcate下面才能在浏览器中看到

【实例截图】

from clipboard

【核心代码】

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="newjsandcss/photo-sphere-viewer.min.css" rel="stylesheet" />
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        #chartdiv {
            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="chartdiv"></div>
    <script src="js/three.min.js"></script>
    <!-- 3D -->
    <!--<script src="./newjsandcss/three.min.js"></script>-->
    <!-- js语言修补匠,可向后兼容,适用于低版本浏览器 -->
    <script src="./newjsandcss/polyfill.js"></script>
    <!-- 事件发射器库,它为javascript对象提供观察者模式 -->
    <script src="./newjsandcss/uevent.min.js"></script>
    <!-- 模板引擎 -->
    <script src="./newjsandcss/doT.min.js"></script>
    <!-- 阻止睡眠 -->
    <script src="./newjsandcss/NoSleep.js"></script>
    <!-- 处理手机陀螺仪方向 -->
    <script src="./newjsandcss/DeviceOrientationControls.js"></script>
    <!-- 双屏渲染 -->
    <script src="./newjsandcss/StereoEffect.js"></script>
    <!-- 全景图插件 -->
    <script src="./newjsandcss/photo-sphere-viewer.js"></script>

    <!-- text used for the marker description -->
    <script type="text/template" id="pin-content">
        <h1>HTML Ipsum Presents</h1>
        <img src="newimg/pin2.png" style="width:100%" />
    </script>

    <script>
  var panos = [
    {
        url: 'newimg/cs.jpg',
      desc: '底部导航描述标题',
      target: {
        longitude: 180.848,
        latitude: -0.244,
        zoom: 50
      }
    }, {
        url: 'newimg/Bryce-Canyon-By-Jess-Beauchemin.jpg',
      desc: 'Bryce Canyon National Park <b>&copy; Jess Beauchemin</b>',
      target: {
        longitude: 3.715,
        latitude: 0.574,
        zoom: 50
      }
    }
  ];

  var PSV = new PhotoSphereViewer({
      container: 'chartdiv', //必选,放置全景图的容器
    panorama: panos[0].url, //必选,全景图的路径
    caption: panos[0].desc, //描述
    cache_texture:15000, //缓存
    loading_img: 'newimg/photosphere-logo.gif', //加载文件时的图片路径
    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: 100, //初始视野,最小视野和最大视野之间
    fisheye: true, //使用true启用鱼眼效果或指定效果强度(true=1.0)此模式可能会对标记渲染产生副作用。
    move_speed: 1.1, //移动速度   拖动图片转动速度
    time_anim: false, //全景图自动开始旋转之前的空闲时间(毫秒)。禁用为False。
//    touchmove_two_fingers: true, //需要两个手指来旋转全景。这允许在包含查看器的页面中进行标准的触摸滚动导航。如果启用,当仅检测到一次触摸时,将显示要求用户使用两个手指的覆盖。
//    mousemove_hover: true, //旋转全景只需移动光标,以查看是否需要点击 移动。
    navbar: [ //导航栏是一个数组,它可以包含以下核心按钮:自动旋转、缩放、下载、标记、陀螺仪、立体声、全屏,以及用于创建自定义按钮的标题和对象
      'autorotate', 'zoom', 'download', 'markers',
      {
        title: 'Change image', //按钮的名字
        className: 'custom-button', //添加到button元素的CSS类
        content: '🔄', //显示的文本
        onClick: (function() { //点击时触发的事件
          var i = 0;
          var loading = false;

          return function() {
            if (loading) {
              return;
            }
            if(PSV.getPanoramaCache(panos[i].url)){
              PSV.clearPanoramaCache(panos[i].url);//清楚缓存
            }
            i = 1 - i;
            loading = true;
            PSV.clearMarkers(); //清除所有标记
            PSV.setPanorama(panos[i].url, true, true) //加载新的全景文件
              .then(function () {
                PSV.setCaption(panos[i].desc);
                loading = false;
              });
          }
        }())
      },
      {
        title  : 'Random position',
        className: 'custom-button',
        content: '🔀',
        onClick: function() {//点击时触发的事件
          PSV.animate({ //动画
            longitude: (Math.random() - 0.5) * 3 / 2 * Math.PI,
            latitude: (Math.random() - 0.5) * 3 / 4 * Math.PI,
            zoom: Math.random() * 60 20
          }, 1500);
        }
      },
      'caption', 'gyroscope', 'stereo', 'fullscreen'
    ],
    //标记,https://photo-sphere-viewer.js.org/markers.html
    markers: (function() {
      var a = [];
      a.push({
        id: 'lorem',
        tooltip: {
          content: 'Lorem ipsum dolor ist amet et consecturo.',
          position: 'bottom right'
        },
        //content: document.getElementById('pin-content').innerHTML,//添加内容
        latitude: 5,
        longitude: 0.20,
        image: 'newimg/pin2.png',
        width: 32,
        height: 32,
        anchor: 'bottom center'
      });
      return a;
    }())
  });
  function asd() {
      alert(1);
  }
  PSV.on('select-marker', function (marker, dblclick) { //选择某个标记
      alert("跳转");
      location.href = '/html/HtmlPage2.html';
    //if (marker.data && marker.data.deletable) {
    //  if (dblclick) {
    //    PSV.removeMarker(marker);
    //  }
    //  else {
    //    PSV.updateMarker({
    //      id: marker.id,
    //      image: 'newimg/pin2.png'
    //    });
    //  }
    //}
  });

  //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>
</body>
</html>



实例下载地址

720web全景demo

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
;
报警