怎么做特別牛的720°全景H5？制作全景圖的效果并不復(fù)雜。我們只需要借助:1的背景素材圖，根據(jù)需要添加即可。一、案例效果演示二、組件結(jié)構(gòu)全景容器組件:我們簡(jiǎn)單地將其結(jié)構(gòu)分為三個(gè)層次結(jié)構(gòu):1.最外面的元

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

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

一、案例效果演示

二、組件結(jié)構(gòu)

全景容器組件:我們簡(jiǎn)單地將其結(jié)構(gòu)分為三個(gè)層次結(jié)構(gòu):

1.最外面的元素/背景

2.中間層元素/背景

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

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

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

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

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

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

三、應(yīng)用場(chǎng)景

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

《這些聲音你聽過(guò)嗎？》

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

三、材料準(zhǔn)備

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

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

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

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

四、組件教程

基本用法

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

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

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

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

4.雙擊圖層設(shè)置直接切換到圖層頁(yè)面添加或修改材質(zhì)。

5.點(diǎn)擊進(jìn)入圖層中的排版效果如圖。點(diǎn)擊左上角的黑色小三角，切換回頁(yè)面。

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

h5制作完成后怎么發(fā)給別人？

使用we制作H5后，點(diǎn)擊右上角的發(fā)布，就已經(jīng)發(fā)布了。公眾平臺(tái):

1.將鏈接設(shè)置為關(guān)鍵詞回復(fù)或自動(dòng)回復(fù)的內(nèi)容，或者設(shè)置為自定義菜單。

2.可以在圖形消息的原文中插入H5鏈接，用戶可以通過(guò)點(diǎn)擊原文直接進(jìn)入H5頁(yè)面。空間:直接復(fù)制鏈接發(fā)布就行了。