zoukankan      html  css  js  c++  java
  • 基于Three.js的360度全景--photo-sphere-viewer--简介

    这个是基于three.js的全景插件  photo-sphere-viewer.js 

    ————————————————————————————————————————

    1、能添加热点;

    2、能调用陀螺仪;

    3、功能比较完善,能满足大多数人的需求了;

    4、最主要的是操作简单,提供一长全景图片即可(大多数手机都可以拍摄)。

    直接上代码:

    var photosphere = document.getElementById('photosphere');
     var PSV = new PhotoSphereViewer({
      // 全景图片路径
    //  panorama: 'Bryce-Canyon-National-Park-Mark-Doliner.jpg',
      panorama: 'sun.jpg',
      // 容器
      container: photosphere,
      //标题
      caption:"",
      // 关闭动画
      time_anim: false,
      //鱼眼镜头
      fisheye:true,
      // 显示导航栏
    //  navbar: true,
    //  自定义导航的顺序
      navbar:  [
       'autorotate',
       'zoom',
       'gyroscope',
       'markers',
       'caption',
       'fullscreen'
      ],
      //按钮提示
      lang: {
       autorotate: 'Automatic rotation',
       zoom: 'Zoom',
       zoomOut: 'Zoom out',
       zoomIn: 'Zoom in',
       download: 'Download',
       fullscreen: 'Fullscreen',
       markers: 'Markers',
       gyroscope: 'Gyroscope'
      },
      // 设置画布大小
      size: {
        '100%',
    //   height: '323px'
       height: '603px'
      },
    //  启用陀螺仪
      gyroscope:true,
    //  准备就绪就执行
    //  onready:Ready,
      // 标记列表
      markers: [{
       // 当单击时打开面板的图像标记
       id: 'image',
       longitude: 5.69810,
       latitude: -0.13770,
       image: 'http://photo-sphere-viewer.js.org/assets/pin-blue.png',
        32,
       height: 32,
       anchor: 'bottom center',
       tooltip: 'A image marker. <b>Click me!</b>',
       content: document.getElementById('lorem-content').innerHTML
      },
       {
        // 具有自定义样式的html标记
        id: 'text',
        longitude: 0,
        latitude: 0,
        html: 'HTML <a href="javascript:;" onclick="top.hello();">markerd</a> ♥',
        anchor: 'bottom right',
        style: {
         maxWidth: '100px',
         color: 'white',
         fontSize: '20px',
         fontFamily: 'Helvetica, sans-serif',
         textAlign: 'center'
        },
        tooltip: {
         content: 'An HTML marker',
         position: 'right'
        }
       },
       {
        // 圆圈标记
        id: 'circle',
        circle: 20,
        x: 2500,
        y: 1000,
        tooltip: 'A circle marker'
       },
       {
        // 圆圈标记
        id: 'circle2',
        circle: 30,
        x: 2000,
        y: 1200,
        tooltip: 'A circle marker'
       }
      ]
     });
    

      

    注:调用陀螺仪需要 引用 DeviceOrientationControls.js;

    使用方法:

    1、这个插件的用法很简单,引入如下2个js

    <script src="js/three.min.js"></script>
    <script src="js/photo-sphere-viewer.min.js"></script> 

    2、初始化一下,(具体各种参数配置根据情况而定)

    复制代码
    var PSV = new PhotoSphereViewer({
            // 全景图的完整路径
            panorama: 'images/360img03.jpg',
    
            // 放全景图的元素
            container: div
    })
    复制代码

    配置参数

    下面是该全景图插件的所有可用配置参数:

    复制代码
    panorama:必填参数,全景图的路径。
    container:必填参数,放置全景图的div元素。
    autoload:可选,默认值为true,true为自动调用全景图,false为在后面加载全景图(通过.load()方法)。
    usexmpdata:可选,默认值为true,如果Photo Sphere Viewer必须读入XMP数据则为true。
    default_position:可选,默认值为{},定义默认的位置,及用户看见的第一个点,例如:{long: Math.PI, lat: Math.PI/2}。
    min_fov:可选,默认值为30,观察的最小区域,单位degrees,在1-179之间。
    max_fov:可选,默认值为90,观察的最大区域,单位degrees,在1-179之间。
    allow_user_interactions:可选,默认值为true,设置为false则禁止用户和全景图交互(导航条不可用)。
    tilt_up_max:可选,默认值为Math.PI/2,向上倾斜的最大角度,单位radians。
    tilt_down_max:可选,默认值为Math.PI/2,向下倾斜的最大角度,单位radians。
    zoom_level:可选,默认值为0,默认的缩放级别,值在0-100之间。
    long_offset:可选,默认值为PI/360,mouse/touch移动时每像素经过的经度值。
    lat_offset:可选,默认值为PI/180,mouse/touch移动时每像素经过的纬度值。
    time_anim:可选,默认值为2000,全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)
    theta_offset:过时的选项,可选,默认值为1440,自动动画时水平方向的速度。
    anim_speed:可选,默认值为2rpm,动画的速度,每秒/分钟多少radians/degrees/revolutions。
    navbar:可选值,默认为false。显示导航条。
    navbar_style:可选值,默认为{}。导航条的自定义样式。下面是可用的样式列表:
    backgroundColor:导航条的背景颜色,默认值为rgba(61, 61, 61, 0.5)。
    buttonsColor:按钮的前景颜色,默认值为transparent。
    activeButtonsBackgroundColor:按钮激活状态的背景颜色,默认值为rgba(255, 255, 255, 0.1)。
    buttonsHeight:按钮的高度,单位像素,默认值为20。
    autorotateThickness:autorotate图标的厚度,单位像素,默认值为1。
    zoomRangeWidth:缩放的范围,单位显示,默认值50。
    zoomRangeThickness:缩放的范围的厚度,单位像素,默认值1。
    zoomRangeDisk:缩放范围的圆盘直径,单位像素,默认值为7。
    fullscreenRatio:全屏图标的比例,默认值为3/4。
    fullscreenThickness:全屏图标的厚度,单位像素,默认值为2。
    loading_msg:可选,默认值为Loading…,图片加载时的提示文字。
    loading_img:可选,默认值为null,在加载时显示的图片的路径。
    size:可选,默认值null,全景图容器的最终尺寸。例如:{ 500, height: 300}。
    onready:可选值,默认值为null。当全景图准备就绪并且第一张图片显示时的回调函数。
    复制代码

     3、上面demo的代码

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>360全景图</title>
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        <!-- 启用webAPP全屏模式-->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!-- 隐藏状态栏或者设置状态栏的颜色-->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!-- 禁止缓存访问页面-->
        <meta http-equiv="Pragma" content="no-cache">
        <meta name="applicable-device" content="mobile">
        <!-- 页面关键词-->
        <link rel="stylesheet" href="css/demo01.css">
        <script src="js/three.min.js"></script>
        <script src="js/photo-sphere-viewer.min.js"></script>
        <!---->
        <script src="js/demo01.js"></script>
        <!--[if IE]>
            <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="main">
            <h3 id="title">旋转查看效果</h3>
            <div id="container"></div>
        </div>
    </body>
    </html>
    复制代码
    复制代码
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
        text-decoration: none;
        border: 0;
        outline: 0;
    }
    .main{
        max- 640px;
         100%;
        margin: 0 auto;
    }
    .main h3{
        text-align: center;
        padding: 10px 0;
    }
    复制代码
    复制代码
    /**
     * Created by Administrator on 2016/11/29.
     */
    
    
    //必须在服务器上才能看到效果!
    window.onload=function(){
        getTitleHeight();
        loadingAllImg();
    }
    //让全景图刚好撑满屏幕
    var canvasHeight;
    function getTitleHeight(){
        var title=document.getElementById('title');
        var titleHeight=parseFloat(getComputedStyle(title).height);
        var maxHeight=window.innerHeight;
        canvasHeight=parseFloat(maxHeight-titleHeight)+'px';
    }
    //全景图参数配置函数
    function loadingAllImg(){
        var div = document.getElementById('container');
        var PSV = new PhotoSphereViewer({
            // 全景图的完整路径
            panorama: 'images/360img03.jpg',
    
            // 放全景图的元素
            container: div,
    
            // 可选,默认值为2000,全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)
            time_anim: false,
    
            // 可选值,默认为false。显示导航条。
            navbar: true,
    
            // 可选,默认值null,全景图容器的最终尺寸。例如:{ 500, height: 300}。
            size: {
                 '100%',
                height: canvasHeight
            }
        });
    }
    复制代码

    同时,在github上面,大家搜索(Photo Sphere Viewer),也能找到!目前这个插件感觉还不是很完善。

    最后附上 photo-sphere-viewer.js API-------http://photo-sphere-viewer.js.org/

  • 相关阅读:
    POJ 1703 Find them, Catch them
    POJ 2236 Wireless Network
    POJ 2010 Moo University
    POJ 2184 Cow Exhibition
    POJ 3280 Cheapest Palindrome
    POJ 3009 Curling 2.0
    POJ 3669 Meteor Shower
    POJ 2718 Smallest Difference
    POJ 3187 Backward Digit Sums
    POJ 3050 Hopscotch
  • 原文地址:https://www.cnblogs.com/smiler/p/8628347.html
Copyright © 2011-2022 走看看