一、H5全景圖-朋友圈全景圖-720°全景-VR -----工具使用

原文地址:
http://blog.csdn.net/qq_24889075/article/details/51970006
http://www.jianshu.com/p/342f81c1d58d

其實pano2vr軟件的使用,操作很簡單的

工具:Pano2VR 、Firefox 、Google Chrome

提示:Pano2VR  有破解版 有正式版,推薦使用正式版。

首先打開Pano2VR 熟悉一下界面
這裏寫圖片描述

大體有這麼幾個模塊:
1. 輸入 :導入、設置 全景圖片
2. 輸出 :輸出列表、選擇輸出方式(’增加’其實就是輸出到本地)
3. 顯示參數 :看那三個參數都能猜出來,就是顯示什麼樣唄(其實是剛剛載入這個場景時候顯示的樣子,也就是默認顯示)
4. 用戶數據 :用來設置用戶信息的
5. 交互熱點 :熱點 就是和用戶交互的點,可以當做按鈕。
6. 媒體 :設置媒體文件的地方。常見的媒體:圖片、音頻、視頻

漫遊瀏覽器其實就是一個場景顯示列表。

我們導入一張全景圖來看看


輸入模塊中的圖片是導入進來的全景圖,顯示參數模塊是進入場景的顯示狀態,漫遊瀏覽器以後不介紹了,也沒啥說的。

輸入模塊


選擇輸入:
類型 不建議手動選擇了,因爲是程序根據圖片自動識別的,手動設置肯能出現一些不可預知的問題。
全景圖 是我們選擇的圖片路徑。
交互熱 區這裏不介紹了(等弄用到時候 你們自己就會了)。

打補丁:
有時候由於拍攝或者圖片拼接時候處理有問題,導致腳底 或者天空 顯示有問題(比如馬賽克、黑洞)那麼這時候我們想讓其變得美觀一些就要做一些事情了:補天 填地。

還可以放公司logo哦

點擊打補丁, 新建:

位置模塊:這裏是設置畫面顯示的狀態,我們可以手動拖拉右側圖片 也可以在這裏設置。
網格模塊:是爲了我們更好的打補丁,根據個人需求來設置。
輸出模塊:設置輸出的照片參數。

要注意的是最後的提取插入,提取按鈕是將我們右側顯示的畫面 輸出 到我們在輸出模塊設置的位置。插入按鈕是將我們在輸出模塊設置的位置的圖片 替換爲我們右側顯示的畫面。

實操:


我們可以看見 我場景中的天和地都是黑洞,那麼我現在想將其換掉,可以這樣做:
1. 在場景中提取一個相近的圖片,然後在覆蓋黑洞。
2. 用提前找好的圖片來覆蓋黑洞。

在這裏我用方法一吧
首先提取一張相似的圖片

然後選擇黑洞合適的位置 將其覆蓋

OK完成了~ 奏是這麼簡單….

轉換輸入的圖片 這個不建議亂改(略)

顯示參數


個人感覺這裏沒啥可說的,自己點點左側的 右側自己顯示了。
這裏是設置進入場景顯示的狀態,也就是說 右側顯示的樣子 就是剛進入場景的樣子

用戶數據


同樣沒啥可說的 略

交互熱點


點型和多邊形交互熱區:這個下面會說一下的
交互熱區:略
熱點列表:看名字就知道,列表嘛~

主要看點型和多邊形交互熱區,這裏分爲兩種:點型熱點 和多邊形熱點

如果瞭解過編程基礎知識的可以把熱點想象成一個’對象‘,沒編程基礎的 就把 熱點想象成按鈕吧~
熱點擁有自己的id(就是按鈕的身份證號)
熱點可以設置皮膚id(按鈕的樣式 相當於人穿的衣服)
標題就是標題啦(鼠標放在熱點上會顯示一個 小的說明框)
URL就是點擊熱點跳轉到哪個場景
目標就是場景的顯示樣式

這裏唯一要特別說明的就是,系統默認的熱點樣式有點醜,我們想把它設置爲我們自己的圖片需要這樣做:

實操

設置樣式 需要皮膚id,要想有皮膚id就得有皮膚,那麼皮膚在哪裏創建呢?
工具–皮膚編輯器(快捷鍵 ctrl+k) 這樣就打開皮膚編輯器了
我們可以在這裏自己設置皮膚,也可以在別人的皮膚上面進行修改。具體怎麼操作,會PhotoShop 或者玩過SVG的應該一看就知道了。

在這裏我隨便拖一個圖形,記錄下id(自己設置爲一下最好,能按照命名規範就更好了)
然後在 點型和多邊形交互熱區 界面中設置皮膚id,這個id就是剛剛記錄的id。

可能有點時候引用了些資源 導致直接輸出的時候 熱點沒有設置上 皮膚,此時應該在 輸出中的皮膚/控制器 中導入 包含熱點皮膚id 的皮膚

皮膚中可以設置各種事件的,有興趣可以研究去。皮膚也可以設置一些導航神馬的 就是看你腦洞大不大了…這裏不介紹

媒體

這裏也沒啥可說的,當你導入了媒體資源是這樣的

就是設置一下你播放時候的樣式和其他參數

輸出


這裏有這麼幾種可選類型,flash就不選了 爲啥呢 百度去,選h5了。

點擊增加(其實這個就相當於其他軟件的生成按鈕)
這裏只介紹設定高級設置HTML的部分功能

設定:

切片設置:面片尺寸和質量不要管,默認就行 沒玩明白就不要亂改了。圖片名和麪片名可以根據自己命名規則改一下。
顯示:尺寸 就是生成後顯示的大小 ;FoV模式就是視野模式,根據自己需求設置

自動旋轉:這個也不用說了吧,看名就能看懂了

皮膚/控制器:添加皮膚的

輸出:輸出的路徑

高級設置:

下載/預覽:加載過程中顯示的樣式
熱點文本框和多邊形文本框:就是設置熱點文本框的
控制:就是控制鼠標的

其實軟件上面已經寫的很清楚了,沒必要在這裏浪費口舌

HTML

如果不選擇開啓html文件輸出的話,那麼生成的將只是有核心代碼的’程序’,如果選擇了的話 軟件會給你打包一個類似於Demo的html文件(這個文件就是將用核心代碼將全景圖顯示出來)

模板參數 就是設置一些 生成的html文件一些參數(就是Demo的參數)

格式:html和htm沒啥區別 哪個都行

到此我們基本都介紹一遍了,下一篇我們開始分析生成的源代碼

自己用了兩個小時把這個工具學了一下,感覺還挺有意思的。
之後前到貼吧中的一篇帖子後感覺也不錯 推薦一下:【Pano2VR 教程】從會走到飛跑


原文地址:
http://blog.csdn.net/qq_24889075/article/details/51970006
http://www.jianshu.com/p/342f81c1d58d

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章