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

徐廣情+李念

摘 要：隨著電子商務(wù)的迅速發(fā)展，人們對(duì)三維電商平臺(tái)的需求日趨強(qiáng)烈。本文介紹了Flash 3D技術(shù)以及其在在線商品展示上的優(yōu)勢(shì)，并在此基礎(chǔ)上提出了基于Flash 3D的在線商品展示方法，最后通過一個(gè)應(yīng)用實(shí)例說明了該技術(shù)的有效性及可行性。

關(guān)鍵詞：Flash 3D;Away3D;在線展示;三維展示

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

1 Flash 3D概述

1.1 Flash 3D技術(shù)簡(jiǎn)介

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

1.2 Flash 3D在線展示的優(yōu)勢(shì)

目前，有許多支持在線3D展示的技術(shù)，如：基于HTML5 和JavaScript的3D技術(shù)、基于VRML的3D技術(shù)、基于Java的3D技術(shù)以及基于Flash的3D 技術(shù)（即Flash 3D）等。HTML對(duì)3D的支持是從HTML5才開始的，而瀏覽器對(duì)HTML5支持還不太普及，因而基于新的HTML5的開發(fā)存在一定的難度; VRML 3D技術(shù)則由于其文件數(shù)據(jù)量大且兼容性差等特點(diǎn)沒有得到廣泛應(yīng)用;而Java3D已于2003年停止了升級(jí)開發(fā)，同時(shí)其執(zhí)行速率不高等，都在一定程度上限制了它的進(jìn)一步應(yīng)用[2]。相對(duì)于其它技術(shù)來講，F(xiàn)lash 3D所具有的優(yōu)勢(shì)有：Flash文件體積小適合快速在線瀏覽，并且?guī)缀跛械臑g覽器都支持FlashPlayer播放器，此外它還具有較強(qiáng)的跨平臺(tái)性以及豐富的3D特效支持等。

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

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

該方法一般是先通過對(duì)實(shí)物進(jìn)行多角度拍攝，一般需要16-32張圖片，將圖片在Flash中使用“逐幀動(dòng)畫”來實(shí)現(xiàn)商品的360度自動(dòng)旋轉(zhuǎn)，然后直接發(fā)布成.gif格式圖片，可以實(shí)現(xiàn)流暢地在線動(dòng)態(tài)展示效果。這種簡(jiǎn)單的合成圖片無法實(shí)現(xiàn)鼠標(biāo)交互操作，若配合ActionScript腳本，則可以實(shí)現(xiàn)對(duì)圖片旋轉(zhuǎn)進(jìn)行簡(jiǎn)單控制如：放大、停止旋轉(zhuǎn)、拖放等。但是從本質(zhì)上來講，這種3D效果只是一種視覺上的假象，因?yàn)槟Ｐ捅旧聿痪邆淙S的特性，只是一種“仿3D”特效。目前，大部分電子商務(wù)網(wǎng)站的三維產(chǎn)品展示都是基于這一原理的。

2.2 借助于Flash 3D引擎

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

3 基于Flash 3D的商品展示實(shí)例

3.1 實(shí)現(xiàn)原理

本實(shí)例以Flash CS6.0+Away3D 4.0作為開發(fā)平臺(tái)，在.fla文件中不進(jìn)行場(chǎng)景的繪制和動(dòng)畫制作，僅僅只是加載一個(gè)基于ActionScript 3.0的類，然后在這一個(gè)自定義類中通過程序設(shè)計(jì)實(shí)現(xiàn)3D模型的繪制、加載、控制等特效。

3.2 三維模型的導(dǎo)入

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

_loader = new Loader3D（）;

Loader3D.enableParser（Max3DSParser）;

_loader.load（new URLRequest（"assets/file.3ds"））;

_view.scene.addChild（_loader）;

3.3 三維模型的交互

模型的交互即實(shí)現(xiàn)在場(chǎng)景中對(duì)模型的360度手動(dòng)拖拽、旋轉(zhuǎn)等操作。該操作需要編寫鼠標(biāo)事件的相關(guān)方法，鼠標(biāo)在拖動(dòng)模型時(shí)不僅可以實(shí)現(xiàn)位置的移動(dòng)、角度的旋轉(zhuǎn)，而且可以產(chǎn)生透視效果，這才是真正意義上的3d特效。鼠標(biāo)移動(dòng)時(shí)的關(guān)鍵屬性設(shè)置如下：

_hc.panAngle = （mouseX - _lastMouseX）*.3 ?+ _lastPanAngle;

_hc.tiltAngle = （mouseY - _lastMouseY）*.3 ?+ _lastTiltAngle;

3.4 三維模型的發(fā)布

直接在Flash CS6中發(fā)布，之后就可以生成swf和html兩種格式，圖1 是一個(gè)簡(jiǎn)單的小轎車展示的網(wǎng)頁，可以使用鼠標(biāo)來360度旋轉(zhuǎn)汽車，也可以調(diào)節(jié)遠(yuǎn)近大小等。

4 小結(jié)

本文對(duì)基于Flash3D的在線產(chǎn)品展示的關(guān)鍵技術(shù)進(jìn)行了探討，重點(diǎn)研究了基于Away3D技術(shù)的3D模型導(dǎo)入、渲染與實(shí)時(shí)交互技術(shù)。為實(shí)際的在線三維商品展示平臺(tái)墊定了基礎(chǔ)。

參考文獻(xiàn)：

[1]姚波.基于Papervision3D引擎下的室內(nèi)虛擬漫游研究與探索[J].計(jì)算機(jī)與信息技術(shù)，2011，149（04）：145-146.

[2]李學(xué)鋒.基于Papervision3D的在線產(chǎn)品展示技術(shù)研究[J].襄樊學(xué)院學(xué)報(bào)，2009（08）.

[3]劉民，萬江平.基于Flash 3D的在線虛擬漫游系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代，2014（05）.

作者簡(jiǎn)介：徐廣情（1993-），女， 湖北通城人，本科，研究方向：多媒體技術(shù)、教育技術(shù)學(xué)。endprint