基于對象全景圖片的互動三維商品網絡展示

文丨趙 然 陳 璟

基于對象全景圖片的互動三維商品網絡展示

文丨趙 然 陳 璟

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

對象全景攝影； 交互式； 商品展示

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

1 FLASH平臺下對象全景圖片介紹

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

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

2 實現方法

2.1 商品圖片拍攝

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

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

2.2 圖片素材處理

將獲得的圖片素材通過軟件進行初步處理，處理的重點是商品色彩還原與摳底這兩個方面。在處理商品色彩還原的過程中每一項調整，需要對所有的圖片統一進行，保持處理后圖片效果一致，這里推薦使用Light Room 這款圖片處理軟件，這款軟件能夠將對于任何一張圖片的處理同步到其他的圖片。摳底仍然推薦使用Photo Shop。

2.3 對象全景圖片生成

對象全景圖片生成使用Object2VR這一款軟件，這款軟件擁有其他VR軟件所沒有的強大功能，例如互動皮膚制作、版權信息設置、交互熱點加載等等。打開軟件后，點擊“看板臺”，設置橫向單層欄數為36，縱向層數為1，點擊“更新”，下方會出現36個一字排開的灰色方格，按順序將處理好的圖片導入灰色方格中，并點擊確定，就生成一個SWF格式的文件。

這款軟件提供了一個面對電子商務商家的特殊功能，就是版權信息功能，由這款軟件所生成的圖片，在生成過程中可以設置圖片所使用的網絡域名，開啟版權功能之后，所生成的圖片只能在版權信息所標注的域名中才能夠正確的顯示出來，一旦被用到其他的網站，圖片將無法正確的顯示出來，這也有效的防止了電子商務商家所擁有的圖片被其他商家盜用的情況出現。

2.4 商品網上發布

SWF格式的對象全景圖片可以由IE瀏覽器直接進行瀏覽，不需要下載任何插件，各大電子商務平臺都支持這種格式的文件上傳。圖片下方有排按鈕可以自行對觀看視角進行調整，按下鼠標左鍵在圖片上移動，圖像就會進行旋轉。

3 結 語

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

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

[2] 韋可兵，吳斌. Flash動畫制作之引導圖層教學設計[J]. 中小學電教，2006（5）.

[3] 陳銀鳳. Flash中利用ActionScript 3.0實現圖像的扭曲效果[J]. 微型機與應用，2012（16）.

（南京師范大學美術學院，南京 210046）