基于Web3D的产品虚拟展示与用户定制

武艳芳

（西南科技大学制造学院，四川 绵阳 621010）

随着经济的发展以及竞争的加剧，市场日趋细分，人们的需求正从规模需求转向个性化需求。同时外围环境的变化，如企业从大规模生产转向敏捷制造，电子商务的快速发展等共同催生了一个庞大的定制服务市场。而利用虚拟现实技术，不仅能够构建具有真实感的产品虚拟展示与定制系统。同时对于企业来说，在产品开发设计过程中，尤其是早期概念设计阶段，更可以通过虚拟平台，高效、深入地了解用户对设计方案的评价和需求，从而调整产品研发策略，帮助制造企业设计和生产更加符合市场需求的产品，增强企业的竞争力。

1 虚拟展示与用户定制

1.1 虚拟展示

虚拟展示不同与传统 Web展示的特点主要体现在其真实感强，通过 Web3D技术，可以构建照片级渲染效果的虚拟场景，用户可以像对待实物模型一样，对展示的产品进行立体地观看，旋转、缩放、移动，并可以通过鼠标点击对产品的一些功能进行操作体验，同时还可以添加声音效果。目前这种真实感体验主要集中在动作和声音，不久的将来用户还可以体验更多的感觉，比如直接在虚拟展示系统中通过数字设备“拿”起产品，并感受它的体量感、表面触感等，从而可以带来更加深刻的产品体验。

1.2 用户定制

在虚拟的展示环境中，完善的交互功能的设计可以使用户成为3D产品的参与者而不仅仅是观看者。用户可以按照自己的爱好选择产品的颜色、功能模块以及形态模块、装饰图案等，实现个性化定制，对用户开放的同时，企业也能够通过虚拟平台方便的了解用户的需求与反馈，及时改善产品、调整产品的设计策略，从而开发出用户满意的产品。

2 Wed3D的主流技术

作为互联网上的 3D图形技术，Wed3D最早可追溯到VRML (Virtual Reality Modeling Language) 即虚拟现实建模语言，目前市场上的 Wed3D技术已经发展到几 10种之多，如VRML、Virtools、Cult3D、Java3D、Viewpoint等[1]，以上各项技术都各有特点，广泛应用于企业信息数据、房地产行业、城市规划、电子商务、网络娱乐、远程教育、信息可视化等领域。其中Cult3D文件量非常小，却有近乎完美的三维质感表现，交互能力和显示效果均不错，同时其内核是基于 Java的，可以嵌入用户自己开发的 Java类，可扩展性好。对于窄带网的应用，Cult3D是展示产品最好的解决方案之一。因此，本文以Cult3D作为基础平台，对汽车的虚拟展示与定制为例进行研究。

Cult3D工作流程如下：

1）创建三维模型 Cult3D本身没有三维建模的能力，必须采用其它的3D软件来建模，它支持3DMAX或MAYA来制作物体的三维模型，并赋予材质、灯光、摄像机等。

2）导出模型 在3DMAX或MAYA中，建模完毕后，通过 Cult 3D Exporter 插件输出为Cult3D Designer支持的C3D格式。

3）建立Cult3D模型 在输出C3D格式的3D的模型后，就可以用Cult3D Designer打开该模型，给模型加入互动效果，事件和声音，另外也可以用Java自己编写脚本,进行更高级的交互。添加完毕后你可以将文件保存成 Cult3D Project文件，文件格式是C3P，以便以后的修改，或者利用文件菜单下面的保存网络文件把模型导出成Cult3d Player文件，文件的格式是CO。

4）发布 Cult3D模型已经建立完毕，剩下的工作就是发布CO文件了。Cult3D的跨平台性好，除可以在线发布外，还可以嵌入到Office、Acrobat 等应用程序中进行发布[2]。

3 汽车的虚拟展示与用户定制

3.1 汽车的虚拟展示

在3DMAX环境下创建汽车三维模型，赋予材质，创建灯光和摄像机，并输出为 C3D格式的文件。在 Cult3D中，利用动作面板中的对象运动、交互、声音等事件实现通过鼠标控制模型的3D旋转、缩放、移动以及功能性操作动作和声效。如在本例中，在事件规划图中，给世界启动添加鼠标控制球交互事件，并连接到整个汽车组件上，那么当用户操纵鼠标的左右中键就可以实现汽车的全方位观看了，另外汽车内饰的观看可在车门上添加鼠标左键控制的旋转动作，并用事件的激活与解除激活控制鼠标动作，用户用鼠标点击门，门会旋转开，就可以看到内饰，再次点击门会关闭。具体操作如图1所示。

图1 汽车的虚拟展示

3.2 汽车的色彩定制

由于汽车造型的整体性较强，除了车身的形状之外，大面积的车身色彩、质感和润度往往成为汽车吸引消费者的第一要素，进而影响购买选择。所以汽车厂商应制定尽可能丰富的备选颜色，以适合和满足不同层次消费者的喜好和需要，靠个性化、时尚化的颜色，给消费者第一眼就留下深刻印象，从而激发他们的购车欲望。在汽车外观设计中，配色相对简单，基本上是以车身色彩搭配配件的黑白色系为主，相对于产品定制的其他方面，比如形态定制、功能定制而言，实现起来相对简单和便利。

在 Cult3D中，可以通过两种方式来实现色彩的定制：

一是通过热区贴图法。把不同颜色的图片设置成热区，通过对热区贴图的控制来实现色彩变化。具体操作如图2所示：在场景图表窗口，展开纹理节点，从中找到在原先3DSMAX中赋予车体红色的纹理贴图。双击该贴图，利用热区窗口增加新的纹理贴图，将热点区域设置大小设置与原图片大小相同，即可生产新的色彩热区，用同样的方法可以任意添加需要的色彩。最后在事件规划图窗口中，可以给键盘事件或者自定义事件添加动作窗口纹理节点下的切换热区个性标签动作，这样就可以通过按键或者图标来控制色彩的选择变化了。在本例中，选用自定义事件，因为图标选择控制比按键更方便直观，但是需要在Director中利用脚本触发这些事件。

二是通过加入Java动作脚本。在Cult3d中，可以使用JavaScript创建先进的交互性以控制行为和外表，通过事件来调用。Java Action Script它是一组经过编译后的Java类型程序，是实现对网络三维对象在场景中交互式控制的核心[3]，JAS工具集包括以下几个组成部分：Java类、JAS事件、JAS脚本以及JAS命令，如更换颜色，可以通过JAS脚本执行，执行方式有两种一种是通过改变材质贴图颜色，一种是改变贴图，如下脚本程序是通过改变颜色来执行的，这样需要新的颜色时，只需要在脚本中加入相关的颜色数据就可以了，十分简便。

JavaActionscript(1,0,0){

MapExecute(“yellow”,1); }

actoinsList(“yellow”,“right”){

setTexture(“red”,[255,0,0],[255,255,0],40,40);

mapExecute(“red”,1); }

actoinsList(“red”,“left”) {

setTexture(“red”,[255,0,0],[255,255,0],40,40);

mapExecute(“yellow”,1); }

图2 色彩定制

3.3 汽车的形态定制

形态是影响用户购买产品的重要因素，定制设计在很大程度上是围绕产品形态要素展开的。在产品定制设计中，通常需要使产品的零部件标准化和通用化[4]，这样，同一产品族的产品零件可以实现相互更换，达到定制的目的。在汽车定制中，同一系列的产品，其形态组件一般包括车身、轮毂、前脸、尾翼、后视镜、引擎盖、车灯组。

在 Cult3D中，有两种方法可以实现形态的定制设计：

1）通过消隐和显示实现形态组件的定制在用三维软件建模时，如在3DSMAX中，在同一位置，放置可供选择的不同形态组件，导入到Cult3D中，首先消隐掉不显示的形态组件，留下一个形态组件进行展示，然后利用消隐显示行为对其他对应的形态组件进行选择替换显示，从而获得形态定制的效果。

如在本例中，汽车轮毂的定制，有3种形式的轮毂可供用户定制。在世界开始事件预制第1种轮毂模型为显示形态，第 2、3种轮毂模型处于消隐状态，然后给键盘事件或者自定义事件添加激活/隐藏动作，激活要显示的轮毂模型，而隐藏其他轮毂模型的事件，达到对相应组件进行消隐和显示处理，即达到了形态定制的目的，由于所有轮毂均是由各部件组合起来的，所以隐藏/激活动作应点右键选择应用到子项。具体操作过程如图3所示。

图3 形态定制

2）通过前面介绍的热区贴图的模式 这种方法不仅可以进行色彩的定制，而且对于平面或板型的形态组件，如控制面板的按键布局、窗口形状、装饰带等，这些组件的形态主要靠表面图案来定义，所以通过更换热区贴图的方式可以很容易的实现形态组件的变换。

3.4 汽车的功能定制

产品所有的功能都是由组件来完成的，所以功能定制事实上是属于形态定制的一部分，对不同功能的形态组件进行选择组合即可完成功能定制。

4 媒体合成

Cult3D场景制作好了后，可以在网页、Office、Adobe Acrobat等环境中进行发布，在HTML中，播放器提供属性、程序，并将事件添加到HTML脚本中（JavaScript, VBScript），可以通过HTML页触发场景中的事件，使用户可以利用熟悉的 Web用户界面例如按钮和下拉列表框控制 Cult3D对象的外观和行为，大大丰富了三维浏览时的交互效果。相比较而言，作者选择用Director来封装Cult3D作品，利用Director强大的程序功能，封装后的 Cult3D作品同样可以美化界面，而且更容易的进行事件驱动，能够更好的表现3D交互作品。由于键盘事件的驱动要靠按键比较麻烦，所以在本例中所有的定制都用的是自定义事件，自定义事件可以通过Director图标来驱动，用户只需要点击图标进行选择即可进行浏览和定制。同时用Director可以直接进行本地演示，还可以发布为exe文件，在网页中进行连接或者用于本地和多媒体演示。

封装过程如下：

1）导入 Cult3D场景制作好了后，保存方案。然后打开 Director，在控件选择对话框中，选择Cult 3D ActiveX Player控件，选择Custom，弹出属性设置对话框。该对话框提供了两种连接到 Cult3D场景的方式：嵌入方式和链接方式。使用嵌入方式，Cult3D场景发布后将嵌入在可执行文件中，无须另外提供 co文件，而使用链接方式，必须将Cult3D场景发布为co文件。在这里作者选择嵌入方式。

2）制作按钮 在时间线上只留一个放置Cult3D文件的帧，制作观察角度按钮，制作颜色定制按钮，如图4所示，红色、蓝色、灰色和黄色4种颜色，用于改变汽车的颜色，制作所需要的形态定制按钮，如图4中轮毂1、轮毂2、轮毂3的形状以及尾翼，将这些按钮布置到舞台上的相应位置。在本例中，只对车轮、尾翼、车灯形态进行了定制，对操作控制、观察角度、车灯、车门控制进行了模拟，在实际应用中，可以根据自己的需要对需要定制的部件以及模拟的效果进行调整。

图4 最终平台

3）自定义事件控制 通过为按钮添加脚本来对 Cult3D中的自定义事件进行控制。比如，颜色控制脚本如下所示：

on mouseUp

TriggerEvent sprite (1), "red"

end

其中1为Cult3D物体所在的通道，red是在Cult3D中定义事件的名称。其他形状控制以及观察角度变换的脚本添加改变相应的自定义事件名称即可。

4）优化界面 最后可以通过图片和文字对界面进行优化，以利于用户更好的操作和了解，优化完毕后，单击播放按钮，就可以在 Director中操作了，移动、旋转、缩放、开关门，车灯控制感觉好像是在操纵真正的汽车模型一样，还可以定制颜色、相关功能部件形态，使用户真正畅游在虚拟现实的平台中。

5 小 结

虚拟现实技术的应用，将使得未来的产品设计以及产品推广宣传的方式产生根本性的变化，产品的虚拟展示使用户更方便快捷的获取产品信息，并获得更多真实体验，产品的网络定制设计可以为客户提供个性化的产品服务，并为企业研发提供设计依据。随着 Web3d技术以及对这些技术应用的发展，未来用户网络浏览和选择产品的体验必将大大丰富，对虚拟设计平台的进一步开发行业也必将成为提高企业竞争力的重要资源。

[1]苏威州. 实现网络三维互动—— Cult 3D应用指南[M].北京: 清华大学出版社, 2001: 20-30.

[2]刘 胜. Web环境下交互式3D虚拟展示[J]. 工程图学学报, 2009, 30(4): 20-25.

[3]阿新工作室. 任我虚拟: Cult3d/3ds max 4.2/maya 4三维产品设计与互动教程[M]. 北京: 希望电子出版社, 2002: 40-45.

[4]李晓玲. 基于网络的交互式虚拟展示技术研究[J].计算机工程与应用, 2007, 43(3): 90-92.