全景圖製做詳解

1、前言：偶然看到不少app內又不少關於全景圖的頁面，出於好奇很想看看怎麼實現的。在安居客，以及汽車之家都看到過，先來2個他們的案例你們看看

某裝修公司案例1，    汽車之家案例2

是否是眼前一亮，是否是也想看看他們到底怎麼實現的。以前寫過一個粗糙的關於three.js實現全景圖的文章，相比之下上面的要流暢許多。感興趣的先別往下看，根據上面的案例本身先去找找答案~。

2、案例1和案例2所用的技術以及若是製做

一、看案例中那複雜的代碼不少人估計懵逼了，從代碼中可以獲得實際上是使用：https://krpano.com/ 處理的。

二、krpano這是個什麼東西？其實就是一個軟件，把全景圖放進去自動生成代碼。也就是說上面案例一、2中邏輯代碼根本不須要本身手敲！！！！手敲也就是添加一些邏輯或者重置默認樣式之類吧。

注：該軟件正式使用須要購買，官方129歐元，摺合RMB1千多，好像是購買一次終身使用，能夠多帶電腦同時使用~~使用非正式版的處理出來的全景圖中間有logo，處處都是水印！如這個非正式版的DEMO，是否是很醜~~

三、以2中的DEMO爲例來講說怎麼製做的，須要2點：a 處理軟件(能夠官方下載)，b 全景圖若干

a:下載解壓到本地後以下圖

 

b:把準備好的全景圖往紅框中那些.bat 文件上面一拖，就自動生成頁面代碼了。。。。。

vtour文件夾就是自動生成的~內容如：

 

若是不須要添加功能啥的能夠直接放在服務器就完事了~~~~上面那個非正式demo就是這樣完成的！！沒寫一行代碼~~~~~

目前尚未深刻去學習，只是瞭解個大概，若是實際中真的要用的話確定要深刻去了解的，目前還沒找到比較完整的中文學習文檔，這裏有一個算是不錯的，願意深刻的猛戳這裏

3、軟件：pano2vr，該軟件和上面的軟件相似，導入全景圖自動生成代碼，非正式版本的有水印。

 

pano2的demo:  戳這裏

 4、其餘，第三方平臺：720雲

目前國內有個比較好的第三方專門搞這個，你只須要把全景圖上傳到該平臺，就會自動生成一個全景圖的做品連接給你。

好比我上傳了一個全景圖，該平臺自動生成的做品連接：第三方生成的做品