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>
后記：
這的東西其實我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軟件的基礎使用視頻)