基于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