基于Papervision3D 的在线产品展示技术研究

2009 年8 月 襄樊学院学报 Aug.,2009 第30 卷第8 期 Journal of Xiangfan University Vol.30 No.8

 基于Papervision3D 的在线产品展示技术研究

李学锋 (襄樊学院 数学与计算机科学学院，湖北 襄樊 441053)

摘要：

分析当前在线三维产品展示技术的特点，提出基于Papervision3D的在线产品展示方法，并对其关键技术——建模技术、在线渲染技术和实时交互技术等——进行分析与探讨. 最后，通过一个应用实例说明该技术的有效性.

关键词：Papervision3D；三维产品；在线展示；实时交互

中图分类号：TP391.41 文献标志码：A 文章编号：1009-2854(2009)08-0024-03

在互联网盛行的今天，电子商务已成为人们生活中的一部分. 产品的在线展示是电子商务中的一项重要内容，其效果往往是影响客户购买的决定性因素之一. 但是，当前大部分电子商务产品展示系统提供给用户的仅是产品的静态图片，展示的效果受到很大的局限性. 随着计算机技术与电子商务的发展，人们希望能在线地对产品按照自己的视角去多方位、自主地了解，更希望能体验产品的使用效果. 由此引发了在线的、可交互的实时三维产品展示技术的产生与发展.

 1 当前的在线三维产品展示技术 当前的在线 3D 技术主要有 Java3D 技术、 VRML/X3D技术、Flash3D技术. Java3D由SUN公司在1998年年底正式推出. 它是一个用于实现3D显示的应用程序接口(API)，用来书写带有三维图形的应用程序和Applet. Java3D建立在Java2(Java1.2)基础之上，实现了三维形体的生成、贴图、灯光等一系列三维显示所用到的功能 [1] . 但Java3D已于2003年停止了升级开发，同时其执行速率不高，微软终止其产品中对Java虚拟机的支持等，都在一定程度上限制了它的进一步应用.     

 VRML2.0(VRML97)是1997年12月正式公布的国际标准，可以编写三维动画片、三维游戏、计算机三维辅助教学. 但这种简单的语言功能较弱，与 Java语言等其它高级语言的连接较难掌握 [2] . 2001 年8月由Web3D联盟发布了X3D，X3D是VRML的扩展，并集成了XML，X3D相对于VRML97提出了许多新的特性 [3] . 但到目前为止，没有大公司在背后作强有力的技术推动，开发工具的集成度、便捷性，可用性方面有待完善. VRML/X3D需要安装专门的浏览器，这也是一个影响普及使用的大问题.
     Flash3D技术是近年迅速发展起来的一种在线3D技术，Flash3D 技术与前二者相比，主要优势在于： 1)FlashPlayer 播放器已相当地普及，根据调查显示，约 98.7%以上的PC上都有安装 [4] ；2)Flash技术背后有Adobe 公司的强力支撑，Adobe 提出的RIA技术架构已成为当今Web 发展与应用的一个热点. 目前Flash3D 的主要引擎有Papervision3D、Away3D、Sandy3D、Alternativa3D 等，其中Papervision3D 以其开源、支持AS3.0、API 文档齐全、性能优越受到好评.

 本文将对基于 Papervision3D 的三维虚拟产品展示系统的关键技术进行分析研究.

 2 基于Papervision3D在线虚拟产品展示技术 在线虚拟产品展示系统的关键技术有：三维建模技术、三维模型在线渲染技术、在线交互技术等.

2.1 三维建模技术与模型的导入 三维建模是在线虚拟产品展示中的重要一环， Papervision3D支持三维模型格式有：ASE文件、 Collada格式、MD2格式、Max3DS格式、Sketchup 格式等，当前的Papervision3D支持的主流格式是 Collada格式. 可以使用3DS MAX、MAYA或Google Sketchup等三维建模软件来制作产品的三维模型，然后导出为Collada模型文件. 物体在三维建模中，首先，一定要事先确定物体的比例大小以及三维建模软件的长度单位，一般来讲，设置模型的尺寸比例，最好在建模时将模型整体缩小，加载时通过三维模型对象的scale参数对模型进行整体缩放到适当的尺寸；其次，建模时将模型放置在坐标原点处，可方便一些效果的实现；再者简化模型，建模后，对模型进行优化及三角形的简化处理，通过删除或修改模型中对视觉效果影响不大的部分网格面片信息(包括顶点、边和三角形面片等) 来减少三角形面片数量，以达到降低模型交互显示或实时传输的开销的目的. Collada模型文件可以单独文件形式加入，也可以 XML的节点对象的形式加入.

目前在Papervision3D 里有两种使用collada模型的方式，1)使用Collada类，简便但不支持骨骼等动画信息，适合导入静止的场景模型；2)使用Dae类，支持骨骼动画. 这二个类都在 org.papervision3d.objects.parsers中. 由于不同三维软件的默认单位不同，制作模型时的大小和三维软件的不同，模型的比例尺scale值都是不一样的，在加载时一定要对模型的scale进行调整. 实践发现就是在加载三维模型时这二者也不相同. 对于同一模型，使用Collada类加载时，默认的大小与使用Dae类加载的scale=100的大小一样.

 2.2 三维模型的在线渲染技术 要做到逼真地展示产品，对模型进行纹理贴图与光照处理是必不可少的. 通过纹理贴图展示出产品的特色与细节，光影效果的处理会让渲染出来的场景看上去更加真实. 当 前 Papervision3D 支 持 的 纹 理 有 ： BitmapAssetsMaterial、BitmapColorMaterial、Bitmap FileMaterial、BitmapMaterial、BitmapViewport Material、BitmapWireframeMaterial、ColorMaterial、 MovieAssetMaterial、MovieMaterial、VideoStream Material、WireframeMaterial 等，其中使用最多最方便的是BitmapFileMaterial，它直接将位图文件导入作为模型贴图；另外，通过 MovieAssetMaterial、 MovieMaterial、VideoStreamMaterial 等，可以使用视频、movieclip 来作贴图. 任何 movieclip 能完成的效果，如半透明、模糊、辉光、动画等等都可以作为贴图. 不同的光照效果，需要不同材质配合，光必须照在特定的材质上才能看到相应的效果，不同材质表现出的效果是不一样的. 当前，Papervision3D 支持点光源，同时提供了多种材质. 在使用阴影的时候，需要指定相应的阴影材质，比如GouraudMaterial 或 PhongMaterial 材质等. 虽然 Papervision3D 引擎提供了一些阴影材质，但都是基于纯色的阴影效果而不是位图的的阴影效果. 但是，三维模型上一般使用位图贴图，如何才能将位图和阴影效果叠加到一起. 一般是通过制作一个Shader 和一个BitmapMaterial，再用ShadedMaterial 将它们混合到一起.

2.3 在线实时交互技术 在线实时交互是在线产品展示中用户体验产品特性的关键所在. 比如在展示手机时，可以通过旋转手机让用户从各个角度观看手机的外形、选择手机的颜色；可以将手机的开机显示作成视频，点击开机按钮时，在手机的屏幕上播放；可以让用户在线进行手机电池的拆卸与安装. 通过这些交互让用户充分体验产品的特性，增加用户对产品的了解. 在线三维交互中的关键技术有：事件的监听与执行机制、3D场景中鼠标的定位、三维物体的平滑缓动等. Flash 是利用事件机制来实现实时交互. Flash 的 ActionScript 3.0 的事件机制的设计是基于 W3C DOM Level 3 事件模型 [5] .

Papervision3D 在Flash 原有事件类的基础上又增加了4 个事件类，其中3D 场景交互事件类 InteractiveScene3DEvent 是最常用的鼠标交互事件对象，可使用其 target 属性确定事件目标. 通过对鼠标事件的监听，根据鼠标的位置来控制摄象机的位置以转动镜头，从而实现对产品的环视；根据鼠标的状态来设置用户对产品的操作，例如：产品的移动、缩放、产品拆卸与组装等，还可以做出非常有趣的贴图绘制功能，让用户参与产品的定制，这样增加交互和自制的乐趣. 3D场景中鼠标的定位，是对三维空间中物体上的按钮进行交互的前提条件. 在Papervision3D 中鼠标有两套坐标：空间坐标(Mouse3D)、材质实际坐标(VirtualMouse). 它们的作用分别是将当前鼠标的屏幕二维位置转换成三维空间中三维对象上的实际坐标(x, y, z)和三维物体的材质上的二维位置坐标(x, y). 这两个对象分别是： viewport.interactiveSceneManager.virtualMouse //相对于贴图材质左上角 viewport.interactiveSceneManager.mouse3D //相对于3D 场景原点 VirtualMouse 可以有很多应用，例如在 InteractiveScene3DEvent.OBJECT_MOVE 事件处理函数中，在材质上绘图. 另外，InteractiveScene3D Event 的x、y 属性和virtualMouse 对象的x、y 属性效果相同. 李学锋：基于Papervision3D 的在线产品展示技术研究 26 在Papervision3D 中进行交互时，要将viewport 和material 对象的interactive 设为true. 在进行旋转时，注意 DisplayObject3D 和 SceneObject3D 同是 DisplayObjectContainer3D 的子类，所以它们都是 3D 容器. 每个3D对象的旋转方法都是绕自身的轴，跟容器没有关系，也就是使它不在容器坐标系的中心. 要令对象绕容器轴旋转(比如对象移动到原点以外)，可以使用一个DisplayObject3D对象做容器并旋转此容器. 在使用影片材质绘图时、当材质使用 MovieMaterial 类型时，可以在材质上实现更多交互效果，例如在材质上绘图，通常需要在材质对象(一个MovieClip)内放置一个容器，如Sprite(考虑到独立以及避免和原对象上图形重叠而遮挡). 材质是 MovieClip 对象的一个副本(不是引用)，直接在用作材质的对象上的操作不会影响 3D 对象. 有两种方式在鼠标移动事件中引用此容器，1)直接引用，绘图后再调用材质对象的 drawBitmap()方法将所绘图形抓到材质上来；2)使用surface = 影片剪辑材质对象.movie[“容器对象名”] 得到此容器的一个引用. 接下来在这个对象上结合virtualMouse. 在第2 种方式的引用方法里，在设计状态、作为材质对象的影片剪辑元件中，可以直接向舞台上添加容器对象，此容器对象既是材质元件的属性，也同时出现在显示列表之中. 但是，如果用代码实现材质对象，则需要添加属性、添加到显示列表两个过程. 在进行平面交互时，在interactiveSceneManager 对象以及 3D 对象上侦听 InteractiveScene3DEvent 事件，此事件的face3D 属性即当前三角形引用. 另外，对三维物体运动效果的控制，可以使用 Flash 开源类库Tweener 或TweenMax 类来实现缓动效果. 通过缓动类库轻松完成在指定时间内一个物体内部多种属性值从 a 变化到 b 的过程中的计算. 通过缓动的适当设计，让物体的运动显得更加平滑与自然，展现的效果更加真实.

3 应用实例 图1 是一个汽车展示网页页面，在这个页面中，可以使用鼠标来左右旋转汽车，可以使用鼠标的滚轮来调节汽车的远近大小. 汽车的模型在 3DS MAX 中建模，使用Papervision3D 进行了光照处理. 4 结语 本文对基于Papervision3D的在线产品展示的关键技术进行了探讨，重点研究了产品建模技术、在线渲染技术和在线实时交互技术，对相关技术的实际应用经验进行了总结. 以上研究成果可以丰富电子商务平台的产品展示方式，增强用户对产品在线体验，具有较好的实际应用价值. 参考文献: [1] 曲毅民. Java 3D 实现三维显示研究[J]. 信息技术, 2005(4): 83-85. [2] 罗立宏, 谭夏梅. 几种Web3D 技术及比较[J]. 甘肃科技, 2007(5): 20-22. [3] 张金钊, 张金锐, 张金镝. X3D 虚拟现实技术[J]. 电脑编程技巧与维护, 2008(9): 15-17. [4] 孙 颖. Flash ActionScript 3 殿堂之路[M]. 北京: 电子工业出版社, 2007. [5] BJÖRN HÖHRMANN, PHILIPPE LE HEGARET, TOM PIXLEY. Document Object Model Events[EB/OL]. (2007-12-21)[2009-04-18]. http://www.w3.org/TR/DOM-Level-3-Events/events.html. Online Product Presenting Technology Based on Papervision3D LI Xue-feng (School of Mathematics and Computer Science, Xiangfan University, Xiangfan 441053, China) Abstract: This paper analyses the key aspects of the current online product presenting technologies. The online virtual product presenting method based Papervison3D is proposed.The key technologies to construct the online virtual product presenting system based papervision3D were demonstrated and reseached.At the end, an example is presented to show effectiveness of the method. Key words: Papervision3D; 3D product; Online product presenting; Real-time interaction (责任编辑：陈 丹) 图1 汽车的展示实例图1 汽车的展示实例