基于Flash 3D的在線三維商品展示研究

徐廣情,李 念（武漢東湖學院 計算機科學學院,武漢 430212）

基于Flash 3D的在線三維商品展示研究

徐廣情,李 念
（武漢東湖學院 計算機科學學院,武漢 430212）

隨著電子商務的迅速發展，人們對三維電商平臺的需求日趨強烈。本文介紹了Flash 3D技術以及其在在線商品展示上的優勢，并在此基礎上提出了基于Flash 3D的在線商品展示方法，最后通過一個應用實例說明了該技術的有效性及可行性。

Flash 3D；Away3D；在線展示；三維展示

1 Flash 3D概述

1.1 Flash 3D技術簡介

Flash 3D是指基于網頁Flash 播放器播放并且可以實時交互三維場景信息的一系列應用技術的總稱。它是一種在線3D技術，其中用于實時渲染和制作三維畫面信息的工具，稱為Flash 3D引擎[1]。

1.2 Flash 3D在線展示的優勢

目前，有許多支持在線3D展示的技術，如：基于ΗTML5 和JavaScript的3D技術、基于VRML的3D技術、基于Java的3D技術以及基于Flash的3D 技術（即Flash 3D）等。ΗTML對3D的支持是從ΗTML5才開始的，而瀏覽器對ΗTML5支持還不太普及，因而基于新的ΗTML5的開發存在一定的難度； VRML 3D技術則由于其文件數據量大且兼容性差等特點沒有得到廣泛應用；而Java3D已于2003年停止了升級開發，同時其執行速率不高等，都在一定程度上限制了它的進一步應用[2]。相對于其它技術來講，Flash 3D所具有的優勢有：Flash文件體積小適合快速在線瀏覽，并且幾乎所有的瀏覽器都支持FlashPlayer播放器，此外它還具有較強的跨平臺性以及豐富的3D特效支持等。

2 基于Flash 3D的商品展示方法

2.1 利用Flash軟件及自帶ActionScript腳本

該方法一般是先通過對實物進行多角度拍攝，一般需要16－32張圖片，將圖片在Flash中使用“逐幀動畫”來實現商品的360度自動旋轉，然后直接發布成.gif格式圖片，可以實現流暢地在線動態展示效果。這種簡單的合成圖片無法實現鼠標交互操作，若配合ActionScript腳本，則可以實現對圖片旋轉進行簡單控制如：放大、停止旋轉、拖放等。但是從本質上來講，這種3D效果只是一種視覺上的假象，因為模型本身不具備三維的特性，只是一種“仿3D”特效。目前，大部分電子商務網站的三維產品展示都是基于這一原理的。

2.2 借助于Flash 3D引擎

Flash3D引擎可以配合Flash、Flex軟件進行實時三維模型開發。Flash3D引擎集成了對三維模型的燈光照射、地面反射等效果處理，加載速度快并且展示流暢，用戶體驗顯著提高。目前有Papervision3D、Away3D、Sandy3D、Alternativa3D等，其中Away3D以其開源、免費且具有快速、高效等優勢為廣大用戶所使用。Flash 3D引擎支持三維模型的創建、渲染以及動畫的生成，也支持導入外部的3D模型。由于利用腳本語言直接建模相對來說難度較大，因此用戶一般會選擇先在3dmax、maya等軟件中制作好3D模型，然后在Flash 3D引擎中導入再實現對模型的渲染和交互。

3 基于Flash 3D的商品展示實例

3.1 實現原理

本實例以Flash CS6.0+Away3D 4.0作為開發平臺，在.fl a文件中不進行場景的繪制和動畫制作，僅僅只是加載一個基于ActionScript 3.0的類，然后在這一個自定義類中通過程序設計實現3D模型的繪制、加載、控制等特效。

3.2 三維模型的導入

Away3D支持的模型格式較為豐富。MD2、MD5、3DS、OBJ等常用的格式都支持。本案例選擇的模型為3DS。Away3D中導入外部模型需要用到Loader3D類，在Loader3D類的enableParser方法中設置模型的類型，然后再利用URLReques對象指定模型文件的相對路徑，最后對模型在場景中的位置大小進行設置即可。關鍵代碼：

_loader = new Loader3D();

Loader3D.enableParser(Max3DSParser);

_loader.load(new URLRequest("assets/fi le.3ds"));

_view.scene.addChild(_loader);

3.3 三維模型的交互

模型的交互即實現在場景中對模型的360度手動拖拽、旋轉等操作。該操作需要編寫鼠標事件的相關方法，鼠標在拖動模型時不僅可以實現位置的移動、角度的旋轉，而且可以產生透視效果，這才是真正意義上的3d特效。鼠標移動時的關鍵屬性設置如下：

_hc.panAngle = (mouseX - _lastMouseX)*.3 + _lastPanAngle;

_hc.tiltAngle = (mouseY - _lastMouseY)*.3 + _lastTiltAngle;

3.4 三維模型的發布

直接在Flash CS6中發布，之后就可以生成swf和html兩種格式，圖1 是一個簡單的小轎車展示的網頁，可以使用鼠標來360度旋轉汽車，也可以調節遠近大小等。

圖1 小轎車在線三維展示圖

4 小結

本文對基于Flash3D的在線產品展示的關鍵技術進行了探討，重點研究了基于Away3D技術的3D模型導入、渲染與實時交互技術。為實際的在線三維商品展示平臺墊定了基礎。

[1]姚波.基于Papervision3D引擎下的室內虛擬漫游研究與探索[J].計算機與信息技術,2011,149(04):145-146.

[2]李學鋒.基于Papervision3D的在線產品展示技術研究[J].襄樊學院學報,2009(08).

[3]劉民，萬江平.基于Flash 3D的在線虛擬漫游系統設計與實現[J].計算機時代,2014(05).

徐廣情(1993-)，女, 湖北通城人，本科,研究方向：多媒體技術、教育技術學。

10.16640/j.cnki.37-1222/t.2015.21.207