汽車720全景跟360全景有什么區(qū)別？特點不同，汽車360°全景全方位展示:完整展示360度球形區(qū)域內(nèi)的所有景物。全景場景:最大限度記錄真實畫面。怎么做特別牛的720°全景H5？制作全景圖的效果并不復

汽車720全景跟360全景有什么區(qū)別？

特點不同，汽車360°全景全方位展示:完整展示360度球形區(qū)域內(nèi)的所有景物。全景場景:最大限度記錄真實畫面。

怎么做特別牛的720°全景H5？

制作全景圖的效果并不復雜。我們只需要借助:1的背景素材圖，根據(jù)需要添加即可。

一、案例效果演示

二、組件結構

全景容器組件:我們簡單地將其結構分為三個層次結構:

1.最外面的元素/背景

2.中間層元素/背景

3.最里面的元素(交互元素放置層，縮寫為交互層)

最外層元素/背景由全景容器組件的最外層圖片元素層組成，在手機上看離我們視線最遠；

中間層元素/背景由全景容器組件的中間層中的圖片元素層組成。在手機上看，比最外面的背景更接近視線，介于最里層和最外層之間。

最里面的元素，在手機上看，比最外面的背景離視線最近；一般我們用一個圖層頁面來做這一層，可以在這一層做一些交互的觸發(fā)設置。

可以用最外面的背景(2:1)作為全景容器本身的背景，中間的背景(2:1)，或者直接用頁面作為全景容器的背景(普通全屏尺寸740X1136分辨率72dpi或者加畫布)。

提示:在層間滑動屏幕時，會出現(xiàn)錯位的視覺差異效果。做的層數(shù)越多，視覺差異效果就越豐富。

三、應用場景

全景容器組件，可以連接長寬比為2:1的圖片，以Y軸為中軸，旋轉360。目前有該組件的案例供大家參考。

《這些聲音你聽過嗎？》

《烏蘭察布第二屆冰雪藝術節(jié)》

三、材料準備

下載文末附件中的素材，不用于商業(yè)用途，僅供學習。

1.如果要讓最外面的背景可見，中間的背景不能是JPG格式，可以是PNG格式的圖片，有透明區(qū)域；另外，大小比例為2:1的JPG格式大圖不能放在圖層中。

2.相關尺寸規(guī)格。默認大背景尺寸比例為2:1( 2000 x 1000 px分辨率72dpi)，其他所有小元素在PS中設計后逐一導出。注意:PNG格式的圖像被裁剪掉不必要的透明區(qū)域。大圖尺寸比較大，但是要盡量控制和壓縮。

3.在PS等設計軟件中完成所有元素或大圖。將元素放在在PS等設計軟件中設計排版后，逐個導出PNG或JPG，然后上傳到:1)導出為單獨的圖層，放在中間的背景或者圖層圖層中，看個人需求。

四、組件教程

基本用法

1.添加全景容器組件:高級組件-交互組件-全景容器。

2.單擊Panorama容器以添加組件。

3.點擊【使用中間背景圖片】和【使用外部背景圖片】的縮略圖，將圖片替換為2:1 (2000 x 1000 px分辨率72dpi)的大小比例，兩個背景圖層可以不設置。

4.點擊上圖中任意一層背景圖片，顯示素材上傳界面，僅支持上傳JPG/PNG格式的圖片。

4.雙擊圖層設置直接切換到圖層頁面添加或修改材質。

5.點擊進入圖層中的排版效果如圖。點擊左上角的黑色小三角，切換回頁面。

交互式圖層設置。用戶最關心的是全景容器中的交互設置，一般主要在層(最內(nèi)層)進行。