文丨趙 然 陳 璟

基于對(duì)象全景圖片的互動(dòng)三維商品網(wǎng)絡(luò)展示

文丨趙 然 陳 璟

為了解決電子商務(wù)中消費(fèi)者只能通過二維圖片或視頻的方式了解商品的局限，本為提出了一種新的商品展示方法，以求最大限度的提升消費(fèi)者的購物體驗(yàn)。

對(duì)象全景攝影； 交互式； 商品展示

為了讓消費(fèi)者在脫離親身體驗(yàn)的情況下產(chǎn)生購買沖動(dòng)，電子商務(wù)網(wǎng)站常使用兩種方式展示自己的商品，普通二維圖片與視頻短片。這兩種展示方式各有優(yōu)劣。普通的二維圖片是消費(fèi)者接觸得最多也是最容易被接受的展示方式，圖片數(shù)據(jù)量比較小，可以在短短幾秒內(nèi)通過瀏覽器展示在消費(fèi)者面前，但是圖片所能帶給客戶的商品體驗(yàn)有限，僅僅停留在商品外觀與簡單運(yùn)用上。視頻短片則可以詳細(xì)的介紹商品的外觀與各種功能，給用戶比較全面的商品體驗(yàn)。同樣，視頻也有它的劣勢，給用戶的體驗(yàn)是固定的，自由度低，同時(shí)現(xiàn)在主流電子商務(wù)平臺(tái)都只支持視頻的鏈接功能，暫不支持上傳視頻，所以視頻緩沖的過程將極大的影響消費(fèi)者的購物體驗(yàn)。單一而相對(duì)簡陋的展示方式抑制電子商務(wù)發(fā)展的因素，為了讓消費(fèi)者能夠更直觀的體驗(yàn)商品，需要一種三維圖片，并且可以通過圖片完成互動(dòng)，讓消費(fèi)者通過互聯(lián)網(wǎng)頁能享受到商場購物的直觀感受。本文所介紹的是一種適合網(wǎng)絡(luò)商品展示的互動(dòng)“三維圖片”技術(shù)。

1 FLASH平臺(tái)下對(duì)象全景圖片介紹

對(duì)象全景圖是全景圖的一種，但是有別去傳統(tǒng)的全景圖，它并非是針對(duì)拍攝者周圍的環(huán)境，而是針對(duì)被攝物體本身進(jìn)行的一種360°全方位的展示，達(dá)到對(duì)單一物體進(jìn)行多面觀察的效果。在FLASH平臺(tái)上制作的對(duì)象全景圖，具有強(qiáng)大的交互能力，用戶能夠通過鼠標(biāo)或鍵盤調(diào)整觀察物品的角度，可以對(duì)鏡頭進(jìn)行移動(dòng)、縮放與旋轉(zhuǎn)。由于具有很強(qiáng)的“模擬現(xiàn)實(shí)”能力，圖片能夠給用戶帶來一種將物品置于手心細(xì)細(xì)評(píng)鑒的互動(dòng)感受。由于圖片將用做網(wǎng)絡(luò)電子商務(wù)的商品展示，所以搭載平臺(tái)顯得非常關(guān)鍵，這里選用FLASH平臺(tái)有一下幾個(gè)方面的原因，首先FLASH本身是一個(gè)交互式矢量圖和Web動(dòng)畫的標(biāo)準(zhǔn)，得到IE瀏覽器的普遍支持，無需下載安裝任何其他的組件就能直接播放。其次，由軟件生成的對(duì)象全景文件為SWF格式，文件大小適合網(wǎng)絡(luò)展示，例如一張分辨率800*600，由36張圖片拼接而成的對(duì)象全景圖，大小僅為580KB，在普遍的2MB帶寬下，打開圖片所需要的時(shí)間為3秒左右。

由于制作方式的不同，對(duì)象全景圖分為單層與多層。單層對(duì)象是從某一固定角度對(duì)物體進(jìn)行觀察，可以作360°旋轉(zhuǎn)。這一種圖片需要將相機(jī)進(jìn)行固定，將商品置于轉(zhuǎn)盤上，每旋轉(zhuǎn)一定的度數(shù)（一般為10°）拍攝一張圖片。而多層則是由多個(gè)單層組成，進(jìn)過計(jì)算，一個(gè)過渡平滑的商品上方半球的全景圖需要9個(gè)不同角度的單層進(jìn)行拼接，需要大約324張圖片。所以一般情況下，單層的對(duì)象全景圖更符合商業(yè)運(yùn)用的要求，完全能夠滿足顧客對(duì)于商品的認(rèn)知需求，多層圖片制作成本將超過視頻短片。

2 實(shí)現(xiàn)方法

2.1 商品圖片拍攝

本文實(shí)例拍攝對(duì)象為靴子，拍攝準(zhǔn)備過程中將靴子放置在轉(zhuǎn)盤的中心，要保證相機(jī)鏡頭節(jié)點(diǎn)到靴子幾何中心間距保持不變，依據(jù)拍攝商品的體積大小，本次拍攝選用了100mm焦距的鏡頭。將相機(jī)固定在三腳架上，并全程保持位置不變動(dòng)，保證每一張圖片中靴子在同樣的位置同時(shí)大小一致。必須避免在拍攝過程中光線有任何變化，需要將燈具的位置、功率、燈頭角度調(diào)整到適合的位置后就不再變動(dòng)。對(duì)象全景圖拍攝需要轉(zhuǎn)動(dòng)被攝物體以完成360°的拍攝，在相機(jī)與燈具固定的情況下，由于被攝物的轉(zhuǎn)動(dòng)會(huì)導(dǎo)致其影子在旋轉(zhuǎn)過程中產(chǎn)生變化，在合成全景圖之后會(huì)在轉(zhuǎn)動(dòng)圖片時(shí)產(chǎn)生不自然的感覺，所以需要拍攝過后對(duì)圖片進(jìn)行摳圖，去掉影子。為了方便后期摳圖，在背景的選擇上應(yīng)該遵循純色且與商品顏色差異較大這兩個(gè)原則，保證背景簡單、干凈。

整個(gè)拍攝過程以10°一張進(jìn)行拍攝，一共需要拍攝36張圖片。在第一張圖片拍攝時(shí)，完成對(duì)焦之后將對(duì)焦調(diào)整為手動(dòng)并固定，以保證每一張拍攝的焦點(diǎn)一致，同時(shí)盡量使用小光圈（光圈數(shù)值較大）的曝光組合進(jìn)行拍攝，獲得較大的景深范圍，這將極大的提高后期合成的對(duì)象全景圖的影視質(zhì)量。

2.2 圖片素材處理

將獲得的圖片素材通過軟件進(jìn)行初步處理，處理的重點(diǎn)是商品色彩還原與摳底這兩個(gè)方面。在處理商品色彩還原的過程中每一項(xiàng)調(diào)整，需要對(duì)所有的圖片統(tǒng)一進(jìn)行，保持處理后圖片效果一致，這里推薦使用Light Room 這款圖片處理軟件，這款軟件能夠?qū)?duì)于任何一張圖片的處理同步到其他的圖片。摳底仍然推薦使用Photo Shop。

2.3 對(duì)象全景圖片生成

對(duì)象全景圖片生成使用Object2VR這一款軟件，這款軟件擁有其他VR軟件所沒有的強(qiáng)大功能，例如互動(dòng)皮膚制作、版權(quán)信息設(shè)置、交互熱點(diǎn)加載等等。打開軟件后，點(diǎn)擊“看板臺(tái)”，設(shè)置橫向單層欄數(shù)為36，縱向?qū)訑?shù)為1，點(diǎn)擊“更新”，下方會(huì)出現(xiàn)36個(gè)一字排開的灰色方格，按順序?qū)⑻幚砗玫膱D片導(dǎo)入灰色方格中，并點(diǎn)擊確定，就生成一個(gè)SWF格式的文件。

這款軟件提供了一個(gè)面對(duì)電子商務(wù)商家的特殊功能，就是版權(quán)信息功能，由這款軟件所生成的圖片，在生成過程中可以設(shè)置圖片所使用的網(wǎng)絡(luò)域名，開啟版權(quán)功能之后，所生成的圖片只能在版權(quán)信息所標(biāo)注的域名中才能夠正確的顯示出來，一旦被用到其他的網(wǎng)站，圖片將無法正確的顯示出來，這也有效的防止了電子商務(wù)商家所擁有的圖片被其他商家盜用的情況出現(xiàn)。

2.4 商品網(wǎng)上發(fā)布

SWF格式的對(duì)象全景圖片可以由IE瀏覽器直接進(jìn)行瀏覽，不需要下載任何插件，各大電子商務(wù)平臺(tái)都支持這種格式的文件上傳。圖片下方有排按鈕可以自行對(duì)觀看視角進(jìn)行調(diào)整，按下鼠標(biāo)左鍵在圖片上移動(dòng)，圖像就會(huì)進(jìn)行旋轉(zhuǎn)。

3 結(jié) 語

將對(duì)象全景圖片引入電子商務(wù)商品展示中，能讓消費(fèi)者按照自己的關(guān)注點(diǎn)去了解商品，極大的提高了購物體驗(yàn)，一方面增強(qiáng)了購買欲望，同時(shí)對(duì)商家而言，也免除了由于圖片本身限制所帶來的商品與圖片不符等誤會(huì)。雖然通過三維建模技術(shù)能夠達(dá)到同樣的目的，但是三維建模技術(shù)難度較高，掌握相關(guān)技術(shù)的專業(yè)人士也需花費(fèi)較長的時(shí)間才能完成制作，將大大提高商品展示的成本，另外，三維圖普遍數(shù)據(jù)量較大，而且需要加裝相關(guān)插件才能在瀏覽器上瀏覽，結(jié)合當(dāng)前我國互聯(lián)網(wǎng)發(fā)展現(xiàn)實(shí)，一般消費(fèi)者所使用的帶寬下載三維圖要較長時(shí)間，同時(shí)需要加載插件，將極大的考驗(yàn)消費(fèi)者的耐心，降低消費(fèi)體驗(yàn)的流暢。對(duì)象全景圖制作相對(duì)簡單，可以批量進(jìn)行，數(shù)據(jù)量小，IE瀏覽器能直接播放，各大電子商務(wù)平臺(tái)也支持相關(guān)格式圖片的上傳，在各個(gè)方面都具有優(yōu)勢。對(duì)象全景三維圖片與傳統(tǒng)圖片搭配使用，形成從二維直觀感受到三維客觀表現(xiàn)的全方位商品展示體系，將為消費(fèi)者與商家之間建立起公平、透明、自由的消費(fèi)環(huán)境，促進(jìn)電子商務(wù)的發(fā)展。

[1] 馬阿曼. 淺談Flash中的鏡頭動(dòng)畫[J]. 科技信息（科學(xué)教研），2008（9）.

[2] 韋可兵，吳斌. Flash動(dòng)畫制作之引導(dǎo)圖層教學(xué)設(shè)計(jì)[J]. 中小學(xué)電教，2006（5）.

[3] 陳銀鳳. Flash中利用ActionScript 3.0實(shí)現(xiàn)圖像的扭曲效果[J]. 微型機(jī)與應(yīng)用，2012（16）.

（南京師范大學(xué)美術(shù)學(xué)院，南京 210046）