pano2vr全景圖課程

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ù)】用于填寫作品相關的信息和全景的經(jīng)緯

2、坐標；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. 設置FLASH輸出的視覺效果；1.

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

4、這里暫且定義為hs1；2.4. 完成三個全景的熱點交互之后，右側漫游瀏覽器中每個全景的感嘆號就消失了！2.5. 多個全景漫游的制作到此就OK了！點擊【全部】看看效果吧！三、 腳本編輯在【主界面】-【輸出】中點擊【參數(shù)】按鈕；參照下圖，點擊【編輯】按鈕，進入皮膚腳本編輯界面；參照下圖設置皮膚的大小后，就可以準備皮膚腳本的制作！3.1. 工具欄制作3.1.1. 參照下圖添加一個【繪制矩形】3.1.2. 雙擊已繪制的【矩形】，設置【尺寸】、【背景】和【邊框】等參數(shù)注：尺寸-高的數(shù)值按照按鈕圖片的高并預留上下部分的空白，本例中按鈕圖片為40*40；3.1.3. 參照下圖添加一個圖片作為按鈕，然后點擊新

5、增的圖片，修改【ID】為tool_left3.1.4. 依次加入所有的按鈕圖片并拖到相應的位置，并將【矩形】拖到皮膚的左下角（或你喜歡的位置），記住要設置【錨點】接下來就要對每個按鈕設置功能，雙擊【tool_left】彈出【圖片屬性】，選擇【動作/修改器】3.1.5. 參照下圖設置動作，并依次右上下和放大、縮小（下文不再詳細說明）第7個和第8個按鈕如下3.1.6. 再添加兩個【矩形】，分別是縮略圖（sltbar）和導航圖(dhtbar)，并分別放至左上角和右上角注：為方便演示，皮膚大小調(diào)整為640*380，全部完成后可以再進行調(diào)整；3.1.7. 參照下圖設置第9個和第10個按鈕的動作最基本的皮

6、膚制作到此已完成，保存皮膚并返回主界面，生成輸出看看效果吧！還有一個小小的美化的處理，三個bar的透明處理，再次進入皮膚編輯界面，雙擊【toolbar】，參照下圖設置透明度和動作，別忘了另外兩個bar保存皮膚并返回主界面，生成輸出看看效果吧！是不是美了！？3.2. 縮略圖制作3.2.1. 雙擊【sltbar】矩形，修改尺寸3.2.2. 現(xiàn)在開始【sltbar】的制作，參照【3.1.3】的方法在縮略圖矩形中加入左右兩個方向箭頭3.2.3. 在中部加入【容器】，修改【ID】并設置大小和位置3.2.4. 雙擊slt_center【容器】，勾選【蒙版】3.2.5. 再添加一個【矩形】，【ID】為slt

7、_center_items，并設置【矩形屬性】3.2.6. 在slt_center_items【矩形】中依次加入縮略圖【圖片】3.2.7. 依次為每個縮略圖設置交互熱點替身,雙擊第一個縮略圖，填寫交互熱點替身ID為Point01013.2.8. 點擊動作/修改器選項卡，設置動作，其中dt0101和yellow dot是導航圖中的對象名稱3.2.9. 第二、三個縮略圖如下 3.2.10. 在右側的【樹】中，將slt_center_items【矩形】拖入slt_center【容器】中3.2.11. 修改slt_center_items【矩形】的位置，與slt_center【容器】的位置一致3.2.

8、12. 在右側的【樹】中雙擊slt_left,進入【動作/修改器】3.2.13. 在右側的【樹】中雙擊slt_right,進入【動作/修改器】現(xiàn)在可以告訴你一個好消息，縮略圖的皮膚已經(jīng)完成了，保存腳本-生成輸出看看效果吧！3.3. 導航（雷達）圖制作3.3.1. 參照下圖添加一個【繪制矩形】3.3.2. 雙擊已繪制的【矩形】，設置【尺寸】、【背景】和【邊框】等參數(shù)注：尺寸-高的數(shù)值按照按鈕圖片的高并預留上下部分的空白，本例中按鈕圖片為300*300；3.3.3. 參照下圖添加導航圖，然后點擊新增的圖片，修改【ID】為dht_t013.3.4. 參照下圖添加導航點，然后點擊新增的圖片，修改【ID

9、】為dt0101，需要特別注意的是交互熱點替身ID，必須填寫與之前設定的熱點ID（詳見2.3章節(jié)內(nèi)容）保持一致，如Point01013.3.5. 依次添加另兩個導航點3.3.6. 參照下圖添加當前導航點圖片3.3.7. 參照下圖添加雷達圖片3.3.8. 雙擊yellow_dot1，設置圖片屬性3.3.9. 雙擊樹中的dt0101，設置圖片屬性3.3.10. 依次設置dt0102和dt0103的圖片屬性dt0102dt0103現(xiàn)在又可以告訴你一個好消息，導航（雷達）圖的皮膚已經(jīng)完成了，保存腳本-生成輸出看看效果吧！3.4. Google（百度）地圖制作Google地圖比較方便，因為PANO2VR

10、里集成了谷歌地圖，具體設置如下：1 參照下圖添加一個矩形2 在矩形mapbar中添加一個文本區(qū)3 雙擊剛添加的文本區(qū)填寫文字，注意腳本中的width和height需要與尺寸相符4 關閉皮膚編輯器，在HTML5輸出的HTML選項卡中勾選Include Google Maps選項Baidu地圖比較方便，原因很簡單，PANO2VR里沒有集成了百度地圖，具體設置可參照Google地圖，但第4節(jié)中則不需要勾選Include Google Maps選項，但在生成好的HTML文件中需要在Body的底部加入百度地圖的腳本，如下：<script type="text/javascript&quo

11、t; src="<script type="text/javascript"> /創(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 = new BMap.Map("mapdiv");/

12、在百度地圖容器中創(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.enableScrollWheelZoom();/啟用地圖滾輪放大

13、縮小 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); /向地圖中添加縮略圖控件var ctrl_ove = n

14、ew 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:"&#20840;&#26223;&#28459;&#28216;",content:

15、"&#20840;&#26223;&#28459;&#28216;",point:"114.341256|30.564392",isOpen:0,icon:w:21,h:21,l:0,t:0,x:6,lb:5; /創(chuàng)建marker function baidu_addMarker() for(var i=0;i<markerArr.length;i+) var json = markerArri; var p0 = json.point.split("|")0; var p1 = json.poi

16、nt.split("|")1; 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 BMap.Label(json.title,"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20);marker.se

17、tLabel(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(_iw

18、); ); _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)

19、;)() /創(chuàng)建InfoWindow function baidu_createInfoWindow(i) var json = markerArri; var baidu_iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>"); return baidu_iw; /創(chuàng)建