探索photo-sphere-viewer全景插件

此插件是一位外國人寫的,官網API地址:https://photo-sphere-viewer.js.org/#methods, 點擊看效果吧

3d旋轉的amp： https://github.com/ampproject/amphtml

Three.js： https://threejs.org/docs/index.html

http://victu360.com/krpano_school

1.按要求在頁面中引入文件后,使用以下方式調用,其它配置

 var viewer =new PhotoSphereViewer({
　　panorama: $('#p'+p_id).find('li:first-child').find('img').attr('data-src'), //全景圖片的路徑
　　container: document.getElementById('showImg'),　　//承載全景圖的div盒子
　　cache_texture:15000,　　
　　default_long:'-46', //初始經度，介於0和2π之間
　　default_lat:'0',  //初始緯度，介於-π/ 2和π/ 2之間。
　　min_fov:30,    //最小視野（對應於最大變焦），介於1和179之間。
　　max_fov:90,    //最大視野（對應於最小變焦），介於1和179之間。
　　default_fov:90,
　　time_anim: true,   //全景圖在time_anim毫秒后會自動進行動畫 可以填寫數字
　　fisheye:false,
　　navbar:  [
   　　 'autorotate',
   　　 'zoom',
   　　 'gyroscope',
   　　 'caption',
  　　  'markers',
   　　 //{     //自定義按鈕
  　　  //    id: 'my-button',
  　　  //    title: 'Hello world',
 　　   //    className: 'custom-button',
  　　  //    content: 'Custom',
  　　  //    onClick: function() {
 　　   //        alert('Hello from custom button');
  　　  //    }
 　　   //},
　　],
　　size: {      // Resize the panorama
　　    width: '100%',
　　    height: '100%'
　　},
　　gyroscope:true,
　　loading_txt:'Loading.....',  //    顯示在加載圓的中心的圖像的路徑。
　　markers: null,
　　usexmpdata:true,
　　pano_data: {    //在此示例中，4000x2000圖像用作6000x3000全景圖的一部分，剩余空間將呈現為黑色。
   　　 full_width: 6000,
   　　 full_height: 3000,
  　　  cropped_width: 4000,
  　　  cropped_height: 2000,
  　　  cropped_x: 1000,
  　　  cropped_y: 500
　　},
　　transition: {
   　　 duration: 1500, // duration of transition in milliseconds
   　　 loader: true // should display the loader ?
　　}
　　});

 

2.若想在原插件狀態欄中加入html,比如按鈕啊,icon啊 什么的:
　　

　　$($('.psv-caption')[0]).html("巴拉巴拉~"); 若不這樣寫,像平時這樣來:$('.psv-caption') 是不行的,此代碼返回的是 

　　

　　jq選中的元素最后返回的是一個document,不能直接操作 

3.選中全景中標記:

　　PSV.on('select-marker', function (marker) {});

　　marker攜帶了新建標記時傳遞的信息:唯一id、 標記類型.....

4. 全景圖正在旋轉時觸發:PSV.on('position-updated',function(po){});

　可以是自動旋轉,也可以是手動滑動 ,po返回的是一個json對象,是全景當前位置經緯度坐標信息
5.確定當前圖片是否在緩存中:
 　PSV.getPanoramaCache(src)  返回ture:在緩存中,false:未在緩存中
　 此方法只有在開始配置時設置過緩存數量(cache_texture ) 才可以使用,否則報錯,因為cache_texture 默認為0
6.清除緩存:PSV.clearPanoramaCache(src) //src:圖片地址

7.重新設置圖片全景:PSV.setPanorama(src,true,true);

8.判斷當前全景是否有標記:

　　if( PSV.hud.markers){
　　    PSV.hud.clearMarkers();
　　}
9.為當前全景添加標記: 標記格式按照官網去寫

　　PSV.addMarker({marker}) 
10.重新渲染全景:

　　PSV.render();

11.當全景加載完成后再進行操作,否則很卡頓:

　　PSV.on('ready', function() {});