pano2vr全景圖制作教程

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

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

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

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

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

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

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

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

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

10、里集成了谷歌地圖，具體設(shè)置如下：1 參照下圖添加一個(gè)矩形2 在矩形mapbar中添加一個(gè)文本區(qū)3 雙擊剛添加的文本區(qū)填寫文字，注意腳本中的width和height需要與尺寸相符4 關(guān)閉皮膚編輯器，在HTML5輸出的HTML選項(xiàng)卡中勾選Include Google Maps選項(xiàng)Baidu地圖比較方便，原因很簡(jiǎn)單，PANO2VR里沒有集成了百度地圖，具體設(shè)置可參照Google地圖，但第4節(jié)中則不需要勾選Include Google Maps選項(xiàng)，但在生成好的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();/設(shè)置地圖事件 baidu_addMapControl();/向地圖添加控件 baidu_addMarker();/向地圖中添加marker /創(chuàng)建地圖函數(shù)： function baidu_createMap() var baidu_map = new BMap.Map("mapdiv");/

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

13、縮小 map.enableDoubleClickZoom();/啟用鼠標(biāo)雙擊放大，默認(rèn)啟用(可不寫) map.enableKeyboard();/啟用鍵盤上下左右鍵移動(dòng)地圖 /地圖控件添加函數(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); /標(biāo)注點(diǎn)數(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

20、+"</div>"); return baidu_iw; /創(chuàng)建一個(gè)Icon function baidu_createIcon(json) var baidu_icon = new BMap.Icon(" new 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)建和初始化地圖</script>3.5. 熱區(qū)精圖展示3.5.1. 進(jìn)入主界面，點(diǎn)擊交互熱點(diǎn)修改3.5.2. 選擇多邊形的交互熱點(diǎn)類型，在需要的區(qū)域