前言
最近做了一個720全景工具，有很多開發人員覺得全景圖很簡單，github上也有很多全景圖的原始碼，但當實際使用的時候會發現有很多坑，還達不到真正意義上的商用級別，下面我會把我們開發這個專案遇到的一些坑和解決方案都梳理處理，已經發布到線上 https://720.h5ds.com/
工具簡介：
H5-720全景（簡稱H5-720）是一款基於threejs + h5的全景圖製作工具，使用者可上傳全景圖片製作全景圖，H5-720可以預設按鈕，新增元素，新增熱點，新增特效，新增多種互動方式，一鍵開啟重力感應，VR眼鏡支援，PC端製作後可以適配多端檢視。
什麼是全景圖？
在這之前，簡單的介紹下全景圖，可以360度無死角檢視的四周畫面的圖片，百度百科專業的解釋是這樣的： 全景圖通過廣角的表現手段以及繪畫、相片、視訊、三維模型等形式，儘可能多表現出周圍的環境。360全景，即通過對專業相機捕捉整個場景的影像資訊或者使用建模軟體渲染過後的圖片，使用軟體進行圖片拼合，並用專門的播放器進行播放，即將平面照片或者計算機建模圖片變為360 度全觀，用於虛擬現實瀏覽，把二維的平面圖模擬成真實的三維空間，呈現給觀賞者。
全景圖小行星視角：
全景圖VR視角：
我們要檢視全景圖的時候，需要使用特殊的軟體才可以。
有的叫720全景有的叫360全景，其實都是一樣的，因為有人把左右360和上下360度加起來了，意思是上下左右都可以檢視。
全景圖web端方案
web端要展示全景圖，我們這裡選用threejs來實現，目前常見的方案有3種。
一、將全景圖貼圖到球面上
類似地球儀一樣，這個做法是最簡單的，但是這種做法有很大的缺陷，如果貼圖太大，移動端瀏覽器開啟會直接崩潰，沒法支援高清圖片，PC端的效能也會非常差，圖片太大的情況下GPU效能要求會非常高。
二、將圖片切片成6個，貼圖到一個正方體上
針對第一種情況的優化版本，也是官方提供的全景圖方案就是6面體全景圖，將全景圖切片成6個，然後貼圖到一個正方體上。我們可以使用工具將全景圖切片成6個：https://jaxry.github.io/panor...
然後貼圖到正方體的6個面上
這樣也有一些缺陷：不支援超高清的圖片，因為超高清的圖片切片成6個也會很大，另外如果是正方體的貼圖就沒法做小行星檢視了。所以第三種終極方案就出現了
三、將全景圖切片成N張瓦片圖，然後貼圖到一個球面上
我們專案中把圖片切割成了16份
然後使用threejs自定義shader將貼圖貼到了球面上，每個瓦片圖都會獨立載入更新，這樣就可以做按需載入處理。要做模糊到清晰的載入效果需要做2層球，紅色的球包裹藍色的球，藍色的球體使用瓦片圖，紅色的圖使用低清晰的全景圖，這樣就可以實現一開始模糊，載入每個瓦片圖成功後就慢慢變的清晰了。當然如果要做更高清的效果，可以監聽縮放比例，縮放變大之後就替換視角內更高清的瓦片圖。
我們採用第三種方解決了全景圖的效能問題和預載入的問題