文件說明 · Krpano全景漫游開發手冊

## 下載包使用說明 ### examples文件夾 這是krpano的案例文件夾（1.19的examples文件夾在viewer文件夾下），里面包含了官方的絕大部分案例，這些案例都是學習krpano代碼的很好的素材。注意下載包的案例所使用的viewer是下載包自身的默認viewer文件夾。因為你不能簡單復制案例文件夾，你還需要設置一下對應viewer的路徑，而且該viewer還必須是你自己的viewer。 ### templates 文件夾官方一系列模版所在的文件夾，包括了圖片、xml、html以及相關配置文件等。通過對這里的了解和修改，我們可以做出自己的皮膚模版，然后一鍵生成，實現批量的工作流。當然，正常情況下，你也無需從這里拷貝，因為在droplet過程中會自動生成。部分模版在默認droplet過程中并沒有使用到。 ![](https://box.kancloud.cn/65d6de07c462053fc928c96d9d250379_601x439.png) ### viewer 文件夾 ![](https://box.kancloud.cn/cd0a281e0c56493286eedc68c44a4e1a_589x190.png) krpano 下載包的官方插件、引擎、案例的存放位置，同時也是讓案例文件夾能夠正確顯示的 viewer 所在的位置。其中plugins是當前版本的所有官方插件；examples是官方提供的案例。 **小貼士** 自身項目的 viewer（js和swf）會在droplet過程中自動生成無需從這里拷貝 ### droplet.bat 文件 Krpano Droplets 是krpano命令行工具加上配置文件config的一個快捷方式。droplets使用方式非常簡單，將文件（通常是圖片或者xml等文件）直接拖放在droplet圖標上松開即可。 <img src="http://www.krpano360.com/wp-content/uploads/2016/04/QQ圖片20170506175552_副本_副本.jpg" alt="" width="768" height="641" class="size-full wp-image-5896 aligncenter secureimg_wp">krpano droplet （圖中齒輪狀圖標文件）<img src="http://www.krpano360.com/wp-content/plugins/wpcopyprotectionsu/image.gif" class="pp_cover imagenumber-0" style="position: absolute; border: none; max-width: 100%; max-height: 100%; margin: 0px; padding: 0px; background: none; width: 653px; height: 545px; left: 41px; top: 250px;"> MAKE PANO (NORMAL) Droplet 用法說明: <ul class=" list-paddingleft-2"> <li>生成普通 (=單分辨率) 全景.</li> <li>制作典型的360度全景.</li> <li>全部全景圖將會一次性載入. 默認下方塊最大邊長為2048像素(可以在config配置文件中修改).</li> <li>包括默認的導航皮膚.</li> <li>支持Flash和HTML5.</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于 kmakemultires 工具.</li> <li>配置文件: normal.config</li> <li>默認模版/皮膚配置文件: defaultbuttons.skin</li> </ul>   MAKE PANO (MULTIRES) Droplet    用法說明: <ul class=" list-paddingleft-2"> <li>生成多分辨率全景</li> <li>制作所有類型的全景</li> <li>只有特定的切片在需要時載入. 沒有尺寸/分辨率限制.</li> <li>包含默認的導航皮膚.</li> <li>支持Flash和HTML5.</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于 kmakemultires 工具.</li> <li>配置文件: multires.config</li> <li>默認模版/皮膚配置文件: defaultbuttons.skin</li> </ul>   MAKE PANO (SINGLESWF) Droplet 用法說明: <ul class=" list-paddingleft-2"> <li>生成普通 (=單分辨率) 全景同時將所有文件嵌在一個SWF文件中.只輸出一個SWF文件和一個HTML文件.</li> <li>制作典型的360度全景 .</li> <li>全部全景圖將會一次性載入. 默認下方塊最大變長為2048像素(可以在配置文件中修改).</li> <li>包含默認的導航皮膚.</li> <li>僅支持Flash.</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于 kmakemultires 工具.</li> <li>配置文件: singleswf.config</li> <li>默認模版/皮膚配置文件: defaultbuttons.skin</li> </ul>   MAKE PANO (FLAT) Droplet 用法說明: <ul class=" list-paddingleft-2"> <li>生成平面切片多分辨率圖像.</li> <li>制作平面圖像. 輸出時既定為平面圖像.</li> <li>只有特定的切片在需要時載入. 沒有尺寸/分辨率限制.</li> <li>包含有默認導航按鈕的皮膚，針對特定的視角.</li> <li>支持Flash與HTML5.</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于 kmakemultires工具</li> <li>配置文件: flat.config</li> <li>默認模版/皮膚配置文件: flat.xml / flatskin.xml</li> </ul>   MAKE VTOUR (NORMAL) Droplet 用法說明: <ul class=" list-paddingleft-2"> <li>生成普通 (=單分辨率) 全景并將它們整合到一個虛擬漫游中.</li> <li>制作典型的360度全景.</li> <li>全部全景圖將會一次性載入. 默認下方塊最大邊長為2048像素(可以在配置文件中修改).</li> <li>包含一個包括導航按鈕、可滾動縮略圖以及可選擇必應地圖以及重力感應插件的默認皮膚.</li> <li>支持Flash和HTML5.</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于kmakemultires 工具.</li> <li>配置文件: vtour-normal.config</li> <li>默認模版/皮膚配置文件: vtourskin-thumbnails-bingmaps-gyro.skin</li> </ul>   MAKE VTOUR (MULTIRES) Droplet （正常生成不考慮VR的漫游推薦使用這個dropelt） 用法說明: <ul class=" list-paddingleft-2"> <li>生成多分辨率全景并將它們整合到一個虛擬漫游中.</li> <li>制作所有類型全景圖像.</li> <li>只有特定的切片在需要時載入. 沒有尺寸/分辨率限制.</li> <li>包含一個包括導航按鈕、可滾動縮略圖以及可選擇必應地圖以及重力感應插件的默認皮膚.</li> <li>支持Flash和HTML5.</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于 kmakemultires 工具.</li> <li>配置文件: vtour-multires.config</li> <li>默認模版/皮膚配置文件: vtourskin-thumbnails-bingmaps-gyro.skin</li> </ul>   MAKE VTOUR (VR-OPT) droplet （正常生成帶有VR的漫游推薦使用這個dropelt） 用法說明: <ul class=" list-paddingleft-2"> <li>生成多分辨率全景并將它們整合到一個虛擬漫游中.</li> <li>制作所有類型全景圖像.</li> <li>只有特定的切片在需要時載入. 沒有尺寸/分辨率限制.</li> <li>包含一個包括導航按鈕、可滾動縮略圖以及可選擇必應地圖以及重力感應插件的默認皮膚.</li> <li>支持Flash和HTML5.</li> <li>krpano 1.19 pr9后，可生成為VR優化的全景圖。如果包含立體圖像的輸入時，會生成針對VR使用的立體圖像。</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于 kmakemultires 工具.</li> <li>配置文件: vtour-vr.config</li> <li>默認模版/皮膚配置文件: vtourskin-thumbnails-bingmaps-gyro.skin</li> </ul>   MAKE OBJECT Droplet 用法說明: <ul class=" list-paddingleft-2"> <li>生成若干個平面多分辨率圖像并將它們整合到一個可縮放旋轉的360物體影像中.</li> <li>制作平面圖像物體. 所有物體圖片的尺寸必須一致.</li> <li>只有特定的切片在需要時載入. 沒有尺寸/分辨率限制.</li> <li>包含一個特定的控制物體的皮膚.</li> <li>僅支持Flash.</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于 kmakemultires 工具.</li> <li>配置文件: object.config</li> <li>默認模版/皮膚配置文件: object.xml / objectskin.xml</li> </ul>   Convert SPHERE to CUBE Droplet 用法說明: <ul class=" list-paddingleft-2"> <li>將球面圖像轉換至立方體圖.</li> <li>輸出的立方體格式、尺寸以及圖像尺寸可以在配置文件中修改.</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于 ktransform 工具.</li> <li>配置文件: convertdroplets.config</li> </ul>   Convert CUBE to SPHERE Droplet 用法說明: <ul class=" list-paddingleft-2"> <li>將六張立方體圖像轉換成一張球面全景圖.</li> <li>輸出的圖像尺寸和格式可以在配置文件中修改.</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于 kcube2sphere 工具.</li> <li>配置文件: convertdroplets.config</li> </ul>   Encrypt XML Droplet 用法說明: <ul class=" list-paddingleft-2"> <li>將xml文件拖放進droplet進行加密.</li> <li>加密過程中xml文件會自動被壓縮.</li> </ul> Droplet 說明: <ul class=" list-paddingleft-2"> <li>基于 encrypt 工具.</li> </ul> <h3>制作自定義droplet</h3> 內置 droplets 只是針對最常見的情況的范例。制作自定義的krpano droplet是非常簡單的。你只需要編輯配置文件，然后復制并重命名一個已有的krpano droplet并對droplet本身進行編輯即可。 <ul class=" list-paddingleft-2"> <li>Windows下編輯krpano droplet <ul class=" list-paddingleft-2"> <li>krpano droplet實際上是批處理文件 (.bat).</li> <li>可以在任意文本編輯器下進行編輯.</li> <li>用文本編輯器打開krpano droplet，將配置文件的名字和路徑修改為你自己的配置文件.</li> </ul> </li> <li>Mac OSX下編輯krpano droplet <ul class=" list-paddingleft-2"> <li>droplet實際上是”AppleScript Droplet’.</li> <li>可以使用 ‘Apple Script Editor’打開</li> <li>在 Apple Script Editor打開krpano droplet，將配置文件的名字和路徑修改為你自己的配置文件.</li> </ul> </li> </ul> ### 兩個txt文件 krpano授權的法律聲明以及版本發行說明。 ### krpanotools 包含 32/64 位的 krpanotools32.exe 與 krpanotools64.exe，該兩個文件為 krpano 項目核心，會在命令行中調用它們。 ### krpano Testing Server krpano 自帶的靜態文件本地服務環境，使用它可以路過本地文件案例限制來查看 Flash 與 HTML5 效果，另外它還可以控制瀏覽器緩存、限制下載速度模擬網絡條件。 ![](https://box.kancloud.cn/7c403332692f480af3f582777254f85f_592x248.jpg) ### krpano tools 用來加密保護全景項目的可視化工具，需要注冊才可以使用，這里就不擴展。 ![](https://box.kancloud.cn/f54b483bad2401a6ca11e1f35964e6b2_746x673.jpg) ## 成果文件說明 ### vtour 文件夾結構以下是默認與比較基礎文件結構與文件名，根據droplet的不同，文件可能更多或更少，同時文件名也并不一定和這些一樣。 ~~~ vtour/ | -- panos/ #存放全景切片圖片的文件夾 | -- skin/ #存放皮膚相關文件 | -- plugins/ #用來存放插件 | -- tour.swf #krpano flash viewer | -- tour.js #krpano HTML5 viewer | -- tour.xml #生成全景的相關配置 | -- tour.html #用來瀏覽全景的頁面，需要本地服務環境 | -- tour_editor.html #添加熱點（hotspot）與初始化視角設置的編輯器 | -- tour_testingserver.exe #windows系統中打開測試服務器并打開html文件進行本地瀏覽。 | -- tour_testingserver_macos #mac系統中打開測試服務器并打開html文件進行本地瀏覽。 ~~~ ### vtour 運作機制 Krpano 是通過viewer引擎來實現瀏覽靜態圖片時產生“三維”效果，而這一切則是通過tour.html這個入口文件。過濾掉一些沒用的代碼，可以看到入口文件主代碼如下： ~~~ <div id="pano"></div> <script src="tour.js"></script> <script> embedpano({ swf: "tour.swf", //有則表示加載flash引擎，如果設置html5:only則不需要該值 xml: "tour.xml", //啟動時的配置文件 target: "pano", //要渲染到的目標容器ID html5: "only", //如果有需要用到flash，可設置為auto //id: "krpanoSWFObject", //默認的krpano對象，每一個viewer對應唯一id，與JS交互時要用到 mobilescale: 1.0, //移動設備縮放，1表示不縮放，默認0.5 passQueryParameters: false //是否接受URL傳參，例如：tour.html?html5=only&startscene=scene2 }); </script> ~~~ ![](https://box.kancloud.cn/66f0007e3e69a00d3dbe2a9d16357310_1177x642.png)