原文地址：
http://blog.csdn.net/qq_24889075/article/details/51974204
http://www.jianshu.com/p/a1b8707e3e08
本文純屬個人觀點，如有錯誤請指點
這裏我們主要看一下生成的項目中都有什麼。源碼中都有什麼，如何去自定義
我們先只導入一張全景圖，不做任何設置 然後導出項目。（爲了方便，我將其項目地址和 生成的html地址都設置在一起）
我們看看都有什麼
文件夾images：軟件切好的圖片存放目錄
pano2vr_player.js :Pano2VR自動生成的JavaScript腳本，是整個項目的核心
test1.xml : 裏面主要有一些項目的設置信息，比如熱點 圖片之類的
test1.html : 這個就是我一直所說的 自動生成的demo
至於其他兩個，應該是播放flash用的，也的確是這樣的。（我們生成的h5爲什麼會有flash參與進來呢？下面會說的）
pano2vr_player.swf : 是一個flash文件
swfobject.js : 根據命名來看應該是flash的對象的JavaScript腳本
其實看了demo代碼就知道這兩個文件什麼意思了，當沒有CSS3 3D和WebGL的支持時，會選擇播放這個Flash（9以上，包括9）。如果三者都不支持 那麼對不起，播放不了了~
所以我們主要看上面的四個
images
這裏就是軟件切好的圖片存放目錄。
一共12張圖片，前6個是彩色 後6個是灰色的。
爲什麼會有灰色的呢，生成h5的項目 是用網絡加載才能顯示出來，加載過程中就可能網絡不理想，這些灰色就是在加載時候顯示的。
test1.html
這裏就是生成給我們的demo，以後我們會根據這個demo進行不斷更改，從而做出想要的效果。這裏簡單翻譯下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript" src="swfobject.js">
</script>
<script type="text/javascript">
function hideUrlBar() {//--隱藏iPhone地址欄，方法貌似要自己寫
}
</script>
<!--設置樣式-->
<style type="text/css" title="Default">
body, div, h1, h2, h3, span, p {
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #000000;
}
body {
font-size: 10pt;
background : #ffffff;
}
table,tr,td {
font-size: 10pt;
border-color : #777777;
background : #dddddd;
color: #000000;
border-style : solid;
border-width : 2px;
padding: 5px;
border-collapse:collapse;
}
h1 {
font-size: 18pt;
}
h2 {
font-size: 14pt;
}
.warning {
font-weight: bold;
}
/*修正在WebKit和Mac OS X Lion滾動條 */
::-webkit-scrollbar {
background-color: rgba(0,0,0,0.5);
width: 0.75em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<h1></h1>
<br>
<!--加載核心Js-->
<script type="text/javascript" src="pano2vr_player.js">
</script>
<div id="container" style="width:640px;height:480px;"><!--這裏就是全景圖的容器-->
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript">
// 檢查 是否支持CSS33D效果變換 和 WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {//如果支持，使用H5 展示全景
pano=new pano2vrPlayer("container");//創建panorama player對象，構造函數中的參數是 全景圖的容器
pano.readConfigUrl("test1.xml");//加載參數
// 在iPhone中隱藏地址欄
setTimeout(function() { hideUrlBar(); }, 10);
} else if (swfobject.hasFlashPlayerVersion("10.0.0")) {//不支持，則使用Flash 播放全景（我們不主要分析這裏）
var flashvars = {};
var params = {};
// enable javascript interface
flashvars.externalinterface="1";
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "pano";
attributes.name = "pano";
attributes.align = "middle";
flashvars.panoxml="test1.xml";
params.base=".";
swfobject.embedSWF(
"pano2vr_player.swf", //這裏是我們前面說的那個flash文件
"container", //控件容器
"640", "480",//控件尺寸
"9.0.0", "",
flashvars, params, attributes);
}
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>
</body>
</html>
test1.xml
這個xml文件就是我們要用h5顯示的時候所需要的 ‘配置文件’，然而官方並沒有給出這些表情的介紹，所以只能靠猜了
<?xml version="1.0" encoding="UTF-8" ?>
<!-- 全景圖標籤-->
<panorama id="">
<!--控件 fovmode:視場模式;pannorth:顯示正北;-->
<view fovmode="0" pannorth="0">
<!--顯示參數
pan:平移;
fov:視場;
tilt:俯仰;
-->
<start pan="0" fov="70" tilt="0" />
<!--最小視角-->
<min pan="-180" fov="5" tilt="-48.9271" />
<!--最大視角-->
<max pan="180" fov="120" tilt="48.9271" />
</view>
<!--用戶數據 在在這裏我把翻譯寫到內容中了-->
<userdata title="標題"
datetime="日期"
description="描述"
copyright="版權"
tags="標籤"
author="作者"
source="來源"
comment="評論"
info="信息"
longitude="經度"
latitude="維度" />
<!--熱點-->
<hotspots width="180" height="20" wordwrap="1">
<!--熱點標籤 相關參數挺簡單的 這裏不介紹了，自己翻譯吧-->
<label width="180"
backgroundalpha="1"
enabled="1"
height="20"
backgroundcolor="0xffffff"
bordercolor="0x000000"
border="1"
textcolor="0x000000"
background="1"
borderalpha="1"
borderradius="1"
wordwrap="1"
textalpha="1" />
<!--柱式-->
<polystyle
mode="1"
backgroundalpha="0.2509803921568627"
backgroundcolor="0x0000ff"
bordercolor="0x0000ff"
borderalpha="100" />
</hotspots>
<!--多媒體 我們沒有添加，所以其內容就是空-->
<media/>
<!--圖片資源
prev*url:預覽圖;
tile*url:真正預覽的圖片;
tilesize:圖片大小;
tilescale:圖片縮放級別-->
<input
prev5url="images/26172418_2981_preview_o_preview_5.jpg"
prev4url="images/26172418_2981_preview_o_preview_4.jpg"
prev3url="images/26172418_2981_preview_o_preview_3.jpg"
prev2url="images/26172418_2981_preview_o_preview_2.jpg"
prev1url="images/26172418_2981_preview_o_preview_1.jpg"
prev0url="images/26172418_2981_preview_o_preview_0.jpg"
tile5url="images/26172418_2981_preview_o_5.jpg"
tile4url="images/26172418_2981_preview_o_4.jpg"
tile3url="images/26172418_2981_preview_o_3.jpg"
tile2url="images/26172418_2981_preview_o_2.jpg"
tile1url="images/26172418_2981_preview_o_1.jpg"
tile0url="images/26172418_2981_preview_o_0.jpg"
tilesize="374"
tilescale="1.026738">
<!--預覽圖背景顏色-->
<preview color="0x808080" />
</input>
<!--控制檯
0是假1是真（1就是開關中的開啓,0就是關閉）
simulatemass:模擬質量(在這裏只是指慣性);
lockedmouse:鎖定鼠標;
lockedkeyboard:鎖定鍵盤;
dblclickfullscreen:雙擊全屏;
invertwheel:翻轉鼠標滑輪;
lockedwheel:鎖定鼠標滑輪;
invertcontrol:;鎖定控制檯
speedwheel:鼠標滑輪放大縮小(需要將invertcontrol設置爲0);
sensitivity:敏感度(需要將invertcontrol設置爲0)
-->
<control
simulatemass="1"
lockedmouse="0"
lockedkeyboard="1"
dblclickfullscreen="1"
invertwheel="1"
lockedwheel="0"
invertcontrol="0"
speedwheel="10"
sensitivity="8"
/>
</panorama>
好了，經過測試 我們猜的也是八九不離十~ 如果設置一些旋轉什麼的 都會增加相應的標籤。
只要記住這個xml文件是記錄你配置信息的就好，如果你真的掌握了，就會省下不少麻煩。
比如 現在項目要求 開啓自動旋轉 ！ 原來沒有的功能，按理來說是要重新生成一個,但是如果你掌握了這裏的標籤，只需要改一個數就可以了~
分析：使用H5模式播放全景圖的話，其實就是繪製一個3D的模型（有可能是球，有可能是正方體 具體是什麼 以後有機會的話繼續分析Js源碼），然後將全景圖切分成6份，將起’貼在模型上’ （可以把這個叫做蒙皮） 。在模型的內部的正中央有一個相機，根據鼠標或者鍵盤的事件，進行相應的處理 從而達到了我們眼中的3D效果
好了，這篇的源碼分析就到這裏吧，如果有機會會繼續分析Js核心代碼 到時候我們將不用pano2vr這個工具，可以自己寫核心代碼 擼出來一個全景圖（屬於題外話了，如果有精力的話會嘗試一下）
本片文章全部代表個人觀點，如果有錯誤請諒解 歡迎指正
原文地址：
http://blog.csdn.net/qq_24889075/article/details/51974204
http://www.jianshu.com/p/a1b8707e3e08