panovr全景圖制作教程

1、pano2vr 全?景 ?漫?游制作一、單個全景制作1.1. 運行【 pano2vr 】，進入主界面；1.2. 點擊【選擇輸入】，選擇全景圖片；1.3. 【輸入】 -【類型】默認為【自動】，點擊全景圖【打開】，選定圖片后，點【確定】返回主界面；1.4. 【打補丁】可將 LOGO 放入全景；1.5. 可加入多個補丁，點擊【增加】添加一個補丁，按下圖進行設置；1.6. 【顯示參數(shù)】可調(diào)整全景的水平和垂直角度以及正北方向；1.7. 【顯示參數(shù) /限制】用于指定全景初始的視角，【平搖】為水平方位，【俯仰】為垂直方位，【FoV 】為可視角度，【正北】可調(diào)整全景的方位；1.8. 【用戶數(shù)據(jù)】用于填寫作品相

2、關的信息和 全景的經(jīng)緯坐標；1.9. 點擊【緯度】后的坐標按鈕，設置全景的經(jīng)緯度信息； 通過【設定正北標記】和【選擇地標】可方便的設置正北方位；1.10. 【交互熱點】可在全景實現(xiàn)人機交互的功能；1.11. 在圖片中的任何位置雙擊加入一個點型熱區(qū)；1.12. 向左移動至大門，再添加一個多邊型熱區(qū)；1.13. 媒體 中可加入背景音樂、圖片和視頻等；1.14. 點擊右側的 打開 文件名，可選擇背景音樂；1.15. 在左側圖片的相應位置雙擊，可添加圖片和視頻；1.16. 在電視位置雙擊，可添加視頻；1.17. 在主界面的 輸出 中選擇輸出格式后，點擊 增加 ；1.18. 選擇系統(tǒng)自帶的皮膚；1.19

3、. 設置 FLASH 輸出 的視覺效果；1.20. 設置 FLASH 輸出 的視覺效果；1.21. 點擊 確定 生成 SWF 格式文件，即完成；1.22. 在主界面的 輸出 中選擇輸出格式 HTML5 后，點擊 增加 1.23. 點擊 確定 生成 HTML5 格式文件，即完成；二、多個全景漫游制作2.1. 完成單個全景的基礎上， 在主界面右側的 【漫游瀏覽器】 中，鼠標右鍵選 【Add Panorama 】添加新的全景；2.2. 參照【一】的步驟依次加入全景2 和 3；2.3. 接下來需要對所有全景設置交互熱點，依次選擇全景，設置【交互熱點】-【修改】注：1.填寫【 ID 】時，需要與【 UR

4、L 】中的編號一致，便于后期導航圖和縮略圖的皮膚制作；2.【皮膚 ID 】也是與皮膚中的熱點名稱一致，這里暫且定義為hs1；2.4. 完成三個全景的熱點交互之后，右側漫游瀏覽器中每個全景的感嘆號就消失了！2.5. 多個全景漫游的制作到此就 OK 了！點擊【全部】看看效果吧！三、腳本編輯在【主界面】 -【輸出】中點擊【參數(shù)】按鈕； 參照下圖，點擊【編輯】按鈕，進入皮膚腳本編輯界面； 參照下圖設置皮膚的大小后，就可以準備皮膚腳本的制作！3.1. 工具欄制作3.1.1. 參照下圖添加一個【繪制矩形】3.1.2. 雙擊已繪制的【矩形】，設置【尺寸】、【背景】和【邊框】等參數(shù)注：尺寸-高的數(shù)值按照按鈕圖

5、片的高并預留上下部分的空白，本例中按鈕圖片為 40*40 ；3.13參照下圖添加一個圖片作為按鈕，然后點擊新增的圖片，修改【ID】為 tool_left 3.1.4. 依次加入所有的按鈕圖片并拖到相應的位置，并將【矩形】拖到皮膚的左下角（或你喜歡的位置）， 記住要設置【錨點】接下來就要對每個按鈕設置功能，雙擊【 tool_left 】彈出【圖片屬性】，選擇【動作/修改器】3.1.5. 參照下圖設置動作，并依次右上下和放大、縮小（下文不再詳細說明）第 7 個和第 8 個按鈕如下3.1.6. 再添加兩個【矩形】，分別是縮略圖（sltbar）和導航圖（dhtbar），并分別放至左上角和右上角注：為方

6、便演示，皮膚大小調(diào)整為 640*380 ，全部完成后可以再進行調(diào)整；3.1.7. 參照下圖設置第 9個和第 10 個按鈕的動作 最基本的皮膚制作到此已完成，保存皮膚并返回主界面，生成輸出看看效果吧！ 還有一個小小的美化的處理，三個 bar 的透明處理，再次進入皮膚編輯界面，雙擊【 toolbar 】，參照下圖設置 透明度和動作，別忘了另外兩個 bar保存皮膚并返回主界面，生成輸出看看效果吧！是不是美了?。?.2. 縮略圖制作3.2.1. 雙擊【sltbar】矩形，修改尺寸3.2.2. 現(xiàn)在開始【sltbar】的制作，參照【3.1.3】的方法在縮略圖矩形中加入左右兩個方向箭頭3.2.3. 在中部

7、加入【容器】，修改【 ID 】并設置大小和位置3.2.4. 雙擊slt_center【容器】，勾選【蒙版】3.2.5. 再添加一個【矩形】，【ID】為slt_center_items ，并設置【矩形屬性】3.2.6. 在slt_center_items 【矩形】中依次加入縮略圖【圖片】3.2.7. 依次為每個縮略圖設置 交互熱點替身 ,雙擊第一個縮略圖，填寫交互熱點替身 ID 為 Point0101 3.2.8. 點擊動作/修改器選項卡，設置動作，其中dt0101 和yellow dot 是導航圖中的對象名稱3.2.9. 第二、三個縮略圖如下3.2.10. 在右側的【樹】中，將slt_cent

8、er_items 【矩形】拖入slt_center 【容器】中3.2.11. 修改slt_center_items 【矩形】的位置，與slt_center 【容器】的位置一致3.2.12. 在右側的【樹】中雙擊 slt_left ,進入【動作 /修改器】3.2.13. 在右側的【樹】中雙擊 slt_right ,進入【動作 /修改器】現(xiàn)在可以告訴你一個好消息，縮略圖的皮膚已經(jīng)完成了，保存腳本-生成輸出看看效果吧！3.3. 導航（雷達）圖制作3.3.1. 參照下圖添加一個【繪制矩形】3.3.2. 雙擊已繪制的【矩形】，設置【尺寸】、【背景】和【邊框】等參數(shù) 注：尺寸-高的數(shù)值按照按鈕圖片的高并預

9、留上下部分的空白，本例中按鈕圖片為 300*300 ；3.3.3. 參照下圖添加導航圖，然后點擊新增的圖片，修改【ID】為dht_t01 3.3.4. 參照下圖添加導航點，然后點擊新增的圖片，修改【ID】為 dtO1O1 ，需要特別注意的是交互熱點替身ID，必須填寫與之前設定的熱點ID （詳見2.3章節(jié)內(nèi)容）保持一致，如PointO1O1 3.3.5.依次添加另兩個導航點3.3.6.參照下圖添加當前導航點圖片3.3.7.參照下圖添加雷達圖片3.3.8.雙擊 yellow_dot1 ，設置 圖片屬性 3.3.9.雙擊樹中的dt0101 ，設置圖片屬性3.3.10.依次設置dt0102 和dt01

10、03 的圖片屬性dt0102dt0103 現(xiàn)在又可以告訴你一個好消息，導航(雷達)圖的皮膚已經(jīng)完成了，保存腳本- 生成輸出看看效果吧！3.4. Google (百度)地圖制作Google 地圖比較方便，因為 PANO2VR 里集成了谷歌地圖，具體設置如下：1 參照下圖添加一個矩形2.在矩形mapbar中添加一個文本區(qū)3 雙擊剛添加的 文本區(qū) 填寫文字，注意腳本中的 width 和 height 需要與尺寸相符4.關閉皮膚編輯器，在HTML5輸岀的HTML選項卡中勾選In elude Google Maps 選項Baidu 地圖比較方便，原因很簡單， PANO2VR 里沒有集成了百度地圖，具體設

11、置可參照 Google 地圖，但第 4 節(jié)中則不需要勾選 Include Google Maps 選項，但在生成好的 HTML 文件中需要在 Body 的底部加入百度地 圖的腳本，如下： /創(chuàng)建和初始化地圖函數(shù)： function baidu_initMap()baidu_createMap();/ 創(chuàng)建地圖 baidu_setMapEvent();/ 設置地圖事件 baidu_addMapControl();/ 向地圖添加控件baidu_addMarker();/ 向地圖中添加 marker/ 創(chuàng)建地圖函數(shù)：function baidu_createMap()var baidu_map =

12、new BMap.Map(mapdiv);/ 在百度地圖容器中創(chuàng)建一個地圖var baidu_point = new BMap.Point(114.337663,30.564641);/ 定義一個中心點坐標 baidu_map.centerAndZoom(baidu_point,13);/ 設定地圖的中心點和坐標并將地圖顯示在地圖容器中 window.map = baidu_map; 將 map 變量存儲在全局 /地圖事件設置函數(shù)：function baidu_setMapEvent()map.enableDragging();/ 啟用地圖拖拽事件，默認啟用(可不寫 )map.enableSc

13、rollWheelZoom();/ 啟用地圖滾輪放大縮小 map.enableDoubleClickZoom();/ 啟用鼠標雙擊放大，默認啟用(可不寫 )map.enableKeyboard();/ 啟用鍵盤上下左右鍵移動地圖/地圖控件添加函數(shù)：function baidu_addMapControl()/向地圖中添加縮放控件var ctrl_nav = new BMap.NavigationControl (anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_SMALL);map.addControl(ctrl_nav);/向地

14、圖中添加縮略圖控件var ctrl_ove = new BMap.OverviewMapControl(anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:0); map.addControl(ctrl_ove);/向地圖中添加比例尺控件var ctrl_sca = new BMap.ScaleControl(anchor:BMAP_ANCHOR_BOTTOM_LEFT); map.addControl(ctrl_sca);/ 標注點數(shù)組var markerArr title:,content:,point:114.34125 6|30.564392,isOpen:0

15、,icon:w:21,h:21,l:0,t:0,x:6,lb:5;/ 創(chuàng)建 markerfunction baidu_addMarker()for(var i=0;imarkerArr.length;i+)var json = markerArri;var point = new BMap.Point(p0,p1);var iconImg = baidu_createIcon(json.icon);var marker = new BMap.Marker(point,icon:iconImg);var iw = baidu_createInfoWindow(i);var label = new

16、 BMap.Label(json.title,offset:new BMap.Size marker.setLabel(label);map.addOverlay(marker);label.setStyle(borderColor:#808080, color:#333, cursor:pointer);(function()var index = i;var _iw = baidu_createInfoWindow(i);var _marker = marker; _marker.addEventListener(click,function() this.openInfoWindow(_

17、iw););_iw.addEventListener(open,function()_marker.getLabel().hide();) _iw.addEventListener(close,function() _marker.getLabel().show();) label.addEventListener(click,function() _marker.openInfoWindow(_iw);)if(!json.isOpen)label.hide(); _marker.openInfoWindow(_iw);)()/ 創(chuàng)建 InfoWindowfunction baidu_crea

18、teInfoWindow(i)var json = markerArri;var baidu_iw = new BMap.InfoWindow( + json.title + +json.content+);return baidu_iw;/ 創(chuàng)建一個 Iconfunction baidu_createIcon(json)BMap.Size(json.w,json.h),imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size (json.lb+5,1),offset:new BMap.Size(json.x,json.h)return baidu_icon;baidu_initMap();/ 創(chuàng)建和初始化地圖3.5.熱區(qū)精圖展示3.5.1.進入主界面，點擊交互熱點 修改 3.5.2.選擇多邊形的交互熱點類型，在需要的區(qū)域雙擊開始，通過單擊逐個描點，最后再通過雙擊結束， ID 設置為 jpg01 3.5.3.點擊確定 返回，再進入 皮膚編輯器 ，參照地圖拉一個矩形，但必須去除可見 選項3.5.4.加入一個 關閉 的圖片，