目標(biāo)
制作VR全景圖片的H5頁(yè)面进肯，實(shí)現(xiàn)通過(guò)鏈接訪(fǎng)問(wèn)H5贰剥，實(shí)現(xiàn)簡(jiǎn)單交互（滑動(dòng)看和點(diǎn)擊進(jìn)入下一個(gè)房間）
工具&軟件
insta360：便捷拍攝全景照片和4K級(jí)全景視頻
epub360：H5交互設(shè)計(jì)利器 （導(dǎo)出收費(fèi)）
Pano2VR：一款多國(guó)語(yǔ)言的全景圖像轉(zhuǎn)換工具满俗，把全景圖像轉(zhuǎn)換成的QuickTime或者M(jìn)acromedia Flash8和Flash 9格式的功能拌消。
微盟：一個(gè)針對(duì)微信公眾賬號(hào)提供營(yíng)銷(xiāo)推廣服務(wù)的第三方平臺(tái)翼馆。
全景通
邏輯
已知epub360可以GUI界面做H5闽瓢，可用【嵌入網(wǎng)頁(yè)】組件，So蕊玷，需要將全景圖片打包一個(gè)HTML包嵌入邮利，HTML包中應(yīng)該包括全景圖片和交互組件
第一步 獲得全景照片
（可用VR設(shè)備直接拍或魚(yú)眼鏡頭，全景云臺(tái)垃帅，配合三腳架拼制延届，具體如下）
原始圖像素材類(lèi)型|采用的相機(jī)設(shè)備|采用的機(jī)位|采用的拼合模式|特點(diǎn)描述
------------- | ----------- | ------------ | ---------:
|拍攝簡(jiǎn)單 圖像清晰 推薦
全幀赦颇，四邊被切的魚(yú)眼圖像： 對(duì)角線(xiàn)180度
|拍攝較為復(fù)雜 圖像清晰
虛擬圖像订讼，由三維建模的場(chǎng)景渲染獲得： 90度*90度
于是綜上扇苞。欺殿。。我們用較新技術(shù)的設(shè)備insta360鳖敷，兩個(gè)魚(yú)眼鏡頭脖苏，直接內(nèi)置拼合超方便！
由于當(dāng)時(shí)拍的都是VR視頻定踱，這里使用的全景照片為VR視頻的截屏棍潘。
第二步 將全景照片切片輸出成H5格式
下載軟件Pano2VR
點(diǎn)擊「選擇輸入」，將第一步生成的全景圖片導(dǎo)入進(jìn)去崖媚；同時(shí)點(diǎn)擊「新輸出格式」的下拉框亦歉，選擇「HTML5」選項(xiàng)，然后點(diǎn)擊「增加」按鈕畅哑。
設(shè)置立方體面片尺寸為700設(shè)置輸出文件的輸出目錄后肴楷，點(diǎn)擊確定，就開(kāi)始生成360全景效果了
瀏覽器會(huì)自動(dòng)打開(kāi)上圖中的.html文件荠呐，360全景效果就可以被欣賞到了赛蔫。
至此，實(shí)現(xiàn)本地端H5演示效果泥张。（可放大縮小呵恢，左右移動(dòng)）
第三步 如何上傳服務(wù)器實(shí)現(xiàn)云端H5
方式一：微盟
切片圖片上傳后可生成網(wǎng)址
備注：微盟按請(qǐng)求數(shù)付費(fèi)
方式二：全景通
-
全景軟件教程-全景通
備注：分為各種版本，不同價(jià)位
全景通別墅案例教程
1圾结、新建項(xiàng)目
點(diǎn)擊“新建項(xiàng)目”按鈕瑰剃。
然后填寫(xiě)標(biāo)題并點(diǎn)擊確定。
2筝野、設(shè)置全局參數(shù)
選擇喜歡的鼠標(biāo)樣式
然后點(diǎn)擊最下方“確定”按鈕提交晌姚。
3、添加場(chǎng)景
點(diǎn)擊最頂部菜單“全景場(chǎng)景”
然后點(diǎn)擊“添加新場(chǎng)景”歇竟。
則變成這個(gè)樣子
然后點(diǎn)擊下方的“確定”按鈕挥唠。則添加成功。
4焕议、添加所有場(chǎng)景
然后我們用上面的方法宝磨，來(lái)把所有場(chǎng)景都添加進(jìn)去。如圖所示
5、添加光暈效果
點(diǎn)擊“客廳”場(chǎng)景的“修改按鈕”唤锉。
看到修改界面世囊，找到“光暈部分”，設(shè)置如圖所示窿祥。
開(kāi)啟開(kāi)關(guān)株憾，然后單擊“點(diǎn)擊獲取”按鈕獲取光暈位置。
當(dāng)目標(biāo)中心放到燈的位置晒衩，點(diǎn)擊即可獲取到此位置的數(shù)值嗤瞎。
最后，點(diǎn)擊確定保存此次修改听系。
6贝奇、制作漫游
點(diǎn)擊“客廳”場(chǎng)景的“熱點(diǎn)管理”。
然后“添加新熱點(diǎn)”
看到如下界面
然后抓取熱點(diǎn)位置
轉(zhuǎn)動(dòng)到目標(biāo)位置靠胜，然后點(diǎn)擊白色箭頭就可以獲取到位置掉瞳。
然后繼續(xù)制作漫游事件
最后點(diǎn)擊“確定提交”。
點(diǎn)擊返回上級(jí)
就可以看到我們添加熱點(diǎn)的效果了髓帽。
然后我們用同樣的方法將所有熱點(diǎn)都添加上菠赚。
7、開(kāi)啟控制面板+縮略圖
點(diǎn)擊控制面板
然后設(shè)置如圖所示
然后點(diǎn)擊“確定”保存郑藏。
7衡查、UI與全景主持人
點(diǎn)擊“UI界面”
點(diǎn)擊“添加UI元素”
點(diǎn)擊確定提交。
然后看到詳細(xì)設(shè)置頁(yè)面
根據(jù)圖片修改必盖，然后點(diǎn)擊保存拌牲，就添加完成了。
同樣方法歌粥，添加LOGO和全景主持人塌忽。
9、添加背景音樂(lè)
點(diǎn)擊“全景參數(shù)”
然后修改背景音樂(lè)部分如圖
然后點(diǎn)擊“確定”保存即可失驶。
10土居、設(shè)置地圖
添加地圖導(dǎo)航
點(diǎn)擊地圖管理
設(shè)置如圖所示
然后點(diǎn)擊確定保存
再然點(diǎn)擊“詳細(xì)場(chǎng)景”
將所有場(chǎng)景的地圖參數(shù)都設(shè)置完成。我們的項(xiàng)目就完成了嬉探。下一步就是靜態(tài)生成擦耀。
11、靜態(tài)生成
將全景生成在任何網(wǎng)絡(luò)都可以觀(guān)看的格式
回到總的管理頁(yè)面
再次點(diǎn)擊“開(kāi)始生成”就真的開(kāi)始生成了涩堤。最終會(huì)給出文件所在文件夾的路徑
結(jié)論
已知epub360可以GUI界面做H5眷蜓，可用【嵌入網(wǎng)頁(yè)】組件，So胎围，需要將全景圖片切片上傳服務(wù)器吁系，生成網(wǎng)址后嵌入德召，目前可用微盟或全景通實(shí)現(xiàn)。全景通交互組件更完備汽纤。
修訂
20160426 初稿
20160427 補(bǔ)充全景通部分
20160429 修訂
