學習pano2vr制作html5全景筆記


demo截圖:

demo下載:

  百度網盤:http://pan.baidu.com/s/1o8yBwIA 密碼:nf62(啟服務端查看);

 

我制作是全屏定點360的全景頁面,使用pano2vr軟件制作生成html頁面

1、 准備2張360度以上的圖片:

out.jpg 初始場景展示圖;

in.jpg 切換場景后的第二張圖;

2、打開pano2vr軟件(4.5.3版本):

3、把兩張圖托到軟件里:

默認第一張圖是初始場景圖,你也可以在圖片上右鍵“設定初始場景全景” 

4、選中圖片在“輸入”側 點擊“交互熱點”-“修改”:

 

5、添加選擇好交互的熱點位置、添加標題、切換圖片地址“in”:

6、同樣步驟做"in"場景的熱區:

7、主頁在“輸出”-“新輸出格式”選擇"HTML5"-點“增加”:

8、選擇輸出的路徑:

9、生成文件夾里截圖:

稍微改成全屏場景的代碼:

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5         <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  6         <title></title>
  7         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
  8         <meta name="apple-mobile-web-app-capable" content="yes" />
  9         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 10         <script type="text/javascript" src="swfobject.js">
 11         </script>
 12         <style type="text/css" title="Default">
 13             html,body{
 14                 margin:0;
 15                 padding:0;
 16                 width:100%;
 17                 height:100%;
 18                 overflow: hidden;
 19             }
 20             body, div, h1, h2, h3, span, p {
 21                 font-family: Verdana,Arial,Helvetica,sans-serif;
 22                 color: #000000; 
 23             }
 24             body {
 25               font-size: 10pt;
 26               background : #ffffff; 
 27             }
 28             table,tr,td {
 29                 font-size: 10pt;
 30                 border-color : #777777;
 31                 background : #dddddd; 
 32                 color: #000000; 
 33                 border-style : solid;
 34                 border-width : 2px;
 35                 padding: 5px;
 36                 border-collapse:collapse;
 37             }
 38             h1 {
 39                 font-size: 18pt;
 40             }
 41             h2 {
 42                 font-size: 14pt;
 43             }
 44             .warning { 
 45                 font-weight: bold;
 46             } 
 47             /* fix for scroll bars on webkit & Mac OS X Lion */ 
 48             ::-webkit-scrollbar {
 49                 background-color: rgba(0,0,0,0.5);
 50                 width: 0.75em;
 51             }
 52             ::-webkit-scrollbar-thumb {
 53                 background-color:  rgba(255,255,255,0.5);
 54             }
 55         </style>    
 56     </head>
 57     <body>
 58         <script type="text/javascript" src="pano2vr_player.js">
 59         </script>
 60         <div id="container" style="width:640px;height:480px;">
 61         This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
 62         </div>
 63         <script type="text/javascript">
 64         window.onload = function(){
 65 
 66             var oContainer = document.getElementById('container');
 67             var windWidth = window.screen.availWidth;
 68             var winHeight = window.screen.availHeight;
 69 
 70             oContainer.style.width =''+windWidth+'px';
 71             oContainer.style.height =''+winHeight+'px';
 72 
 73             // check for CSS3 3D transformations and WebGL
 74             if (ggHasHtml5Css3D() || ggHasWebGL()) {
 75             // use HTML5 panorama
 76 
 77                 // create the panorama player with the container
 78                 pano=new pano2vrPlayer("container");
 79                 pano.readConfigUrl("out_out.xml");
 80                 // hide the URL bar on the iPhone
 81                 setTimeout(function() { hideUrlBar(); }, 10);
 82             } else 
 83             if (swfobject.hasFlashPlayerVersion("10.0.0")) {
 84                 var flashvars = {};
 85                 var params = {};
 86                 // enable javascript interface
 87                 flashvars.externalinterface="1";
 88                 params.quality = "high";
 89                 params.bgcolor = "#ffffff";
 90                 params.allowscriptaccess = "sameDomain";
 91                 params.allowfullscreen = "true";
 92                 var attributes = {};
 93                 attributes.id = "pano";
 94                 attributes.name = "pano";
 95                 attributes.align = "middle";
 96                 flashvars.panoxml="out_out.xml";
 97                 params.base=".";
 98                 swfobject.embedSWF(
 99                     "pano2vr_player.swf", "container", 
100                         windWidth, winHeight,   //設置場景大小;
101                         "9.0.0", "", 
102                         flashvars, params, attributes);
103             }
104         }
105         </script>
106         <noscript>
107             <p><b>Please enable Javascript!</b></p>
108         </noscript>
109     </body>
110 </html>
View Code

后記:

這的東西其實我7月份看到文章試着做的,但是因為工作(拖延症)11月份才抄襲寫完(jslover 的文章 《使用pano2vr制作多場景熱點切換的html5全景圖應用》)

 

學習資料:

  jslover:http://www.jslover.com/code/522.html#

  jslover:http://www.jslover.com/code/536.html#

  小志:http://www.iqiyi.com/w_19rrvj5bp9.html#vfrm=2-3-0-1(pano2vr軟件的基礎使用視頻)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM