panovr全景圖制作教程_第1頁(yè)
panovr全景圖制作教程_第2頁(yè)
panovr全景圖制作教程_第3頁(yè)
panovr全景圖制作教程_第4頁(yè)
免費(fèi)預(yù)覽已結(jié)束,剩余1頁(yè)可下載查看

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、pano2vr 全?景 ?漫?游制作一、單個(gè)全景制作1.1. 運(yùn)行【 pano2vr 】,進(jìn)入主界面;1.2. 點(diǎn)擊【選擇輸入】,選擇全景圖片;1.3. 【輸入】 -【類型】默認(rèn)為【自動(dòng)】,點(diǎn)擊全景圖【打開(kāi)】,選定圖片后,點(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ù)】用于填寫作品相

2、關(guān)的信息和 全景的經(jīng)緯坐標(biāo);1.9. 點(diǎn)擊【緯度】后的坐標(biāo)按鈕,設(shè)置全景的經(jīng)緯度信息; 通過(guò)【設(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. 媒體 中可加入背景音樂(lè)、圖片和視頻等;1.14. 點(diǎn)擊右側(cè)的 打開(kāi) 文件名,可選擇背景音樂(lè);1.15. 在左側(cè)圖片的相應(yīng)位置雙擊,可添加圖片和視頻;1.16. 在電視位置雙擊,可添加視頻;1.17. 在主界面的 輸出 中選擇輸出格式后,點(diǎn)擊 增加 ;1.18. 選擇系統(tǒng)自帶的皮膚;1.19

3、. 設(shè)置 FLASH 輸出 的視覺(jué)效果;1.20. 設(shè)置 FLASH 輸出 的視覺(jué)效果;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. 接下來(lái)需要對(duì)所有全景設(shè)置交互熱點(diǎn),依次選擇全景,設(shè)置【交互熱點(diǎn)】-【修改】注:1. 填寫【 ID 】時(shí),需要與【 U

4、RL 】中的編號(hào)一致,便于后期導(dǎo)航圖和縮略圖的皮膚制作;2. 【皮膚 ID 】也是與皮膚中的熱點(diǎn)名稱一致,這里暫且定義為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ù)值按照按

5、鈕圖片的高并預(yù)留上下部分的空白,本例中按鈕圖片為 40*40 ;3.13參照下圖添加一個(gè)圖片作為按鈕,然后點(diǎn)擊新增的圖片,修改【ID】為 tool_left 3.1.4. 依次加入所有的按鈕圖片并拖到相應(yīng)的位置,并將【矩形】拖到皮膚的左下角(或你喜歡的位置), 記住要設(shè)置【錨點(diǎn)】接下來(lái)就要對(duì)每個(gè)按鈕設(shè)置功能,雙擊【 tool_left 】彈出【圖片屬性】,選擇【動(dòng)作/修改器】3.1.5. 參照下圖設(shè)置動(dòng)作,并依次右上下和放大、縮?。ㄏ挛牟辉僭敿?xì)說(shuō)明)第 7 個(gè)和第 8 個(gè)按鈕如下3.1.6. 再添加兩個(gè)【矩形】,分別是縮略圖(sltbar)和導(dǎo)航圖(dhtbar),并分別放至左上角和右上角注:

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

7、中部加入【容器】,修改【 ID 】并設(shè)置大小和位置3.2.4. 雙擊slt_center【容器】,勾選【蒙版】3.2.5. 再添加一個(gè)【矩形】,【ID】為slt_center_items ,并設(shè)置【矩形屬性】3.2.6. 在slt_center_items 【矩形】中依次加入縮略圖【圖片】3.2.7. 依次為每個(gè)縮略圖設(shè)置 交互熱點(diǎn)替身 ,雙擊第一個(gè)縮略圖,填寫交互熱點(diǎn)替身 ID 為 Point0101 3.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è)的【樹(shù)】中,將slt_ce

8、nter_items 【矩形】拖入slt_center 【容器】中3.2.11. 修改slt_center_items 【矩形】的位置,與slt_center 【容器】的位置一致3.2.12. 在右側(cè)的【樹(shù)】中雙擊 slt_left ,進(jìn)入【動(dòng)作 /修改器】3.2.13. 在右側(cè)的【樹(shù)】中雙擊 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ù)值按照按鈕圖片的高

9、并預(yù)留上下部分的空白,本例中按鈕圖片為 300*300 ;3.3.3. 參照下圖添加導(dǎo)航圖,然后點(diǎn)擊新增的圖片,修改【ID】為dht_t01 3.3.4. 參照下圖添加導(dǎo)航點(diǎn),然后點(diǎn)擊新增的圖片,修改【ID】為 dtO1O1 ,需要特別注意的是交互熱點(diǎn)替身ID,必須填寫與之前設(shè)定的熱點(diǎn)ID (詳見(jiàn)2.3章節(jié)內(nèi)容)保持一致,如PointO1O1 3.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.雙擊樹(shù)中的dt0101 ,設(shè)置圖片屬性3.3.10.依次設(shè)置dt0102 和dt

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

11、可參照 Google 地圖,但第 4 節(jié)中則不需要勾選 Include Google Maps 選項(xiàng),但在生成好的 HTML 文件中需要在 Body 的底部加入百度地 圖的腳本,如下:/創(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 = ne

12、w BMap.Map(mapdiv);/ 在百度地圖容器中創(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.enableScro

13、llWheelZoom();/ 啟用地圖滾輪放大縮小 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);/向地圖中

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);/ 標(biāo)注點(diǎn)數(shù)組var markerArr title:,content:,point:114.34125 6|30.564392,isOpen:0,i

15、con: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 B

16、Map.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(_iw

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

18、InfoWindow(i)var json = markerArri;var baidu_iw = new BMap.InfoWindow( + json.title + +json.content+);return baidu_iw;/ 創(chuàng)建一個(gè) 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.進(jìn)入主界面,點(diǎn)擊交互熱點(diǎn) 修改 3.5.2.選擇多邊形的交互熱點(diǎn)類型,在需要的區(qū)域雙擊開(kāi)始,通過(guò)單擊逐個(gè)描點(diǎn),最后再通過(guò)雙擊結(jié)束, ID 設(shè)置為 jpg01 3.5.3.點(diǎn)擊確定 返回,再進(jìn)入 皮膚編輯器 ,參照地圖拉一個(gè)矩形,但必須去除可見(jiàn) 選項(xiàng)3.5.4.加入一個(gè) 關(guān)閉 的圖片,

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論