基于网络的产品虚拟展示系统设计与研究

1、基于网络的产品虚拟展示系统设计与研究（ 1 西安理工大学艺术与设计学院陕西西安710054,2 西安交通大学机械学院陕西西安710049 ）摘要： 随着网络的迅速普及，基于网络的产品虚拟展示技术也在快速发展。本文以面向用户需求的冰箱造型设计为基础，利用cult3D软件和 3Dmax软件的集成，提出了基于网络的冰箱产品虚拟展示系统，主要探讨了展示系统中的四大关键技术建模技术、模型转换、交互设计和系统发布。关键词：面向用户需求; 品虚拟展示 ; Cult3D;交互设计The design and research of products virtual display system based o

2、n network Abstract: With the rapid popularization of Internet, network-based products virtual display technology is also developing rapidly. Based on refrigerator appearance design, using theintegration of Cutl3D and 3Dmax softwares, this paper proposes a virtual display system of refrigerators base

3、d on networks.This paper also mainly discusses the four key technologies ofthe display system,which are Modeling Technology,Model Transformation,Interaction Design and System Release.Key words:User-oriented requirements; Products virtual display; Cult3D; Interaction design1 引言交互式三维虚拟展示系统是致力于解决企业与消费者

4、之间的产品信息问题，通过搭建一个跨越时空局限性的交流互动平台，让消费者及时全面地了解和掌握企业的产品信息，帮助企业充分展示和推广产品 1 。随着网络技术的发展，虚拟展示技术在产品的网络展示中愈来愈受到重视。如何将商业产品逼真地在网络中表现出来，将企业的产品信息用三维的技术发布到网络中并准确地传递给消费着，已经成为当前网络展示的切实需求2 。本文以面向用户需求的冰箱造型设计为基础，提出冰箱产品的虚拟展示系统，主要探讨基于网络的交互式虚拟展示系统的关键技术。2 面向用户需求的冰箱造型设计为了能够更好的把握住消费者的需求，从工业设计的角度对冰箱的造型进行了有针对性的调研。2.1 针对工业设计信息的市

5、场调研在冰箱的调研中主要是针对工业设计信息的问卷调研，从问卷的设计（人机、色彩、结构等）到问卷的数据分析（统计分析、相关性分析和趋势分析）， 坚持从工业设计的角度出发，所构建的调研系统分为 8 大子模块，形态设计评价、造型风格评价、色彩设计评价、材料选择评价、操作环境评价、结构功能分析、人机界面评价、综合效果评价，以形成有助于冰箱设计的需求分析报告。问卷以各种方式发放、回收问卷，通过SPSS进行描述性数据分析，以获得可信度相对较高的需求调研结果。并且，以访问法、调查法为主对海尔以及各大家电卖场进行实地调研（如图1-1 ）。面向用户需求的调研系统问卷调研实地考察2009 年西安理工大学研究生学术

6、年会2.2 冰箱的造型设计访邮电集抽海专电销入问寄话会样尔卖器售户法法调调调工店商员调根据调研结果的描述性统计分析，总结出查查查业场面查法法法园谈冰箱设计的趋势： 冰箱内部空间急需增加蔬菜竖直放置区、菜碟分层搁置架，所占比例为25.6%和 24%；未来冰箱的新功能应该具备饮水机、菜谱、吧台、听音乐，选择饮水机的百分比最高，为68.3%；材料的选择中消费者更倾向于镜面和金属质感，各占26%和 24%；冰箱的操控方式选择最多的为触摸式，占 45.9%；八大 主模 块形造材操人色综结态型料作机彩合构设风选环界设效功计格择境面计果能评评评评评评评评价价价价价价价价图 1-1 冰箱的调研系统Fig 1-

7、1 The Research System of Refrigerator外观颜色占百分比最多的为银灰和白色系列，各占 34.1%和 33.8%；冰箱的形态以选择两门的居多，占 37%；造型风格多选择现代简约，占 53.3%。通过调研与冰箱前沿信息资料的总结，归纳出了冰箱设计的整体发展趋势：经济效果的节能化、多件合一的厨房化、方便需要的小型化、储量升级的大型化、精细生活的多门多温化、种种用途的多功能化、自动控制的智能化、冰箱面板的艺术化等。通过对冰箱调研的总结和SPSS数据分析，明确冰箱造型的设计方向。首先进行多款冰箱造型的草图绘制；其次是方案的筛选，确定几款能够满足用户需求的方案；最后是冰箱

8、的建模和渲染，最终完成面向用户需求的冰箱造型设计。3 冰箱产品虚拟展示系统的关键技术研究为了能够更好的向消费者展示冰箱产品，推广新的产品造型，采用基于网络的虚拟展示成为一个最佳的选择。虚拟展示系统的完成，是一个较为复杂的设计过程，其关键技术主要包括虚拟模型的建立、展示技术、基于网络的交互设计和系统整合，主要涉及的软件有 Cult 3D 、 Java Script 、Dreamweaver、3DMAX、Rhinoceros 等，其中 Cult3D 软件包括了三部分 Cult3D Exporter 、Cult3D Designer 、Cult3D Viewerplugin 。冰箱虚拟展示系统的开发

9、过程大致分为四个部分，总结开发流程如图2-1 所示：建模模型转换交互设计系统的发布 建模 优化模型 基本交互 网页开发 材质 指定轴 高级交互 交互设计3.1 虚拟模型的建立与模型转换 动画所有的建模有着不同的应用领域软件，虚拟展示环境下的仿真模型要解决两个关键问题，即模型转换和几何模型的建立，现在比较成熟的如图 2-1 Cult3D 开发流程3。在实Solidworks 、UG、Pro E、CATIA 等，主要面向制造业Fig2-1 Cult3D Development Process际应用中， 3DS MAX是拥有较广泛的用户群，同时对硬件要求较低，因此在一般情况下应用较多，其他软件的 3

10、D 数字模型可通过软件本身自带的导出接口，导出适合3D MAX的的格式 3 。在 3DS MAX中建立多款冰箱模型后，进行模型的渲染，优化冰箱的模型，并为冰箱门设定旋转轴等，以便模型适合于Cult3D 的22009 年西安理工大学研究生学术年会交互设计。在 3DS MAX中需要安装Cult3D Exporter插件导出模型，然后保存为*.C3D 。 Cult3D Exporter是模型转换的插件，模型转换时Cult3D Exporter的附加功能主要有：优化模型、设置背景和版权信息等。3.2 虚拟模型的交互展示技术冰箱虚拟模型的交互性主要通过Cult3D Designer来实现，它是Cult3

11、D 的设计制作工具，也是最主要的部分。 Cult3D 赋予三维场景 / 物体的交互性在于它能接收内部和外部产生的事件，引发设定的操作4 。Cult3D 能接收的事件类型主要包括：world start、worldstop 、 worldstep 、 timer 、 leftmouse clickon object 、keyboard'skey press 等。通过自定义事件，用于特定情况下由其它事件激发或浏览器外部事件激发。3.2.1基本交互Cult3D最基本的交互性可以使用Cult3D Designer中已预先设置的多种响应行为如事件(Event) 和行为 (Action)，分别针对

12、场景中的各种基本对象，也包括产生各种特效的特殊行为，如粒子系统、3D 场景漫游等 5 。在 Cu1t3D Designer 中直接赋予相应的元素节点，这些元素节点包括导入的三维模型对象本身以及其附属的贴图、材质，还包括场景中的其它基本组成元素，如：文本、声音、摄像机等。在Cult3DDesigner的事件图 (Event Map) 中其事件、对象以及行为在事件图中构成了网状的组织关联结构，如图2-2 所示。图 2-2 Cult3D 中基本交互Fig2-2 The Basic Interaction of Cult3D在基本交互设计中，主要包括了三个部分，其内容在图2-2 的右图中基本能够体现。

13、第一部分是激活与旋转轨迹，是指一个事件world start、个动作Arcball和对象的交互；第二部分是自动旋转对象，是指事件world start、Rotation XYZ和对象的简单交互，也是在3D对象下载完毕后马上激活的事件，便于用户在不执行操作时观看对象；第三部分是一些辅助功能，例如声音、文字跟踪等，通过Cult3D 中的 Sound、 Tooltips等功能很容易实现。32009 年西安理工大学研究生学术年会3.2.2高级交互对于设计一个较为复杂的展示系统来说，预设的基本行为也就越复杂，以实现物体的各种交互功能。事件、对象以及行为在事件图中构成了网状的复杂的组织关联结构，网络的入口

14、为触发世界响应的若干事件，包括鼠标和键盘的触发以及定时器的激活，还可以设置自定义的事件用于与外界程序相交互，以控制对象状态、外观等。图 2-3 Cult3D 中的高级交互Fig2-3 The Advanced Interaction of Cult3D在图 2-3 中可以清晰的看到Obojects与 Event 中复杂的关联结构，高级交互主要包括了冰箱开关门的响应和整体的旋转控制，通过Rotation XYX来实现；锁定摄像头，通过Camera 来实现；颜色变换，通过Hotspot 或 Hide/Unhide World实现等。3.3Java 级的交互对于一个更为复杂的展示系统的设计任务来说，

15、需要加入更加复杂的交互，预设的基本行为对参数控制就不够灵活了。制作后期愈加复杂的网络布局使设计工作变得困难。因此，Cult3D中实现交互性能的另一手段是借助 Java 语言来创建高级的交互行为，以控制对象状态、外观或操纵其运行6 ，过程如图 2-4 所示。模型设计Java 级的交互是通过Cult3D API ( ApplicationCult3D DesignerProgramming Interface)开发程序， 利用 JavaScript进行编译 6。用户不但可以随意地用鼠标托拽对象，还可以根据设定 （如按键）从不同角度真实地了解到产品的外形、颜色和功能，甚至更换产EventsActio

16、nCult3DObojects4EventsActionObojects2009 年西安理工大学研究生学术年会品的颜色、 纹理，甚至将其组合或拆分，大大丰富了三维浏览时的交互效果。以冰箱外观更换色彩为例，在 Java 的脚本文件中，编译生成Cult3D 可使用的 class文件，其编码如下：privateColorred=new Color(200， 10， 10) ；图 2-4 Java 级的交互Fig2-4 The Interaction of JavaprivateColorblue=new Color(100， 100， 200) ；private Colorgreen=new Col

17、or(100， 200，100) ；pirvateColorblack=new Color(50， 50， 50) ；privateColorcolors=red，blue ，greenblack3.4 冰箱虚拟展示系统的发布Cult3D 应用较广，在多个领域中都有较好的表现，其最大的优点就是做产品展示，它可以应用到有多种软件中，最常见的是网络应用，同时也可以应用于微软Office软件及 Adobe 的 Acrobat 、Reader 软件中，还可以在多媒体制作软件Authorware和 Director制作的光盘中离线发布4 。本文中的冰箱虚拟展示系统是发布于网络中。3.4.1基于 WEB的

18、用户界面开发网络界面的设计艺术是研究人机关系的一门新兴学科，它反映着人机之间的信息交流，其本质是人与人的交流，而人与人的交流必然是双向的，互动的7 。所以，“人机”中的“机”( 界面 ) 作为交流的主体，所扮演的角色必需具有人的特征，界面设计的“人性化”成为必然。使网络界面设计具有“人性化”的特点，必须合理调配审美、环境文化、心理、价值观念等各因素的关系，使其达到和谐、统一，可以把网络界面的“人性化”理解为：赏心、悦目、传情、达意7 。本文根据以上WEB界面设计原则和互动虚拟展示的特点，冰箱虚拟展示系统的界面设计以“人性化”为主要出发点，设计出适合人机之间信息交流的操作界面如图2-5 所示。3

19、.4.2展示链接在展示系统的操作平台中，主要包括两部分链接：展示模型的链接、按钮与Cult3D 事件的链接。展示模型的链接，首先将预设的交互模型在Cult3D 中通过 Cult3D Viewer plugin导出为 HTML格式，之后通过 Dreamweaver 将其嵌入到操作界面中，但是嵌入后只能通过鼠标和键盘直接对产品进行操作，初次52009 年西安理工大学研究生学术年会接触的人并不容易操作8 。通过界面中的按钮操作，相对来说更容易些。 按钮与 Cult3D 事件的链接， 是通过 JavaScript和 HTML实现的。 Cult3D 设计的响应事件不能直接嵌入到网页中，需要JavaScr

20、ipt编程后嵌入到HTML中，才能实现产品的交互性。以冰箱的旋转为例，JavaScript的编程语言如下：function triggerReset()var success = Cult3D.triggerEvent("reset");if (!success)alert("Error couldnt find the event StopReset");function triggerStopt()var success = Cult3D.triggerEvent("ice");if (!success)alert("Error couldnt find the event StopRotation");3.4.3冰箱虚拟展示系统的整合面向用户需求的六款冰箱建模渲染和界面开发完成之后，依次对冰箱进行模型转换、交互设计、交互展示和JavaScript编程等，最终完成基于网络的交互式冰箱虚拟展示系统开发如图2-5 。用户通过界面中的按钮和提示进行操作，也可以直接通过鼠标对冰箱产生互动响应，让消费者能够在这个虚拟环境下，对冰箱进行旋转、开关门、换色、换材质等。企业通过该系统展示新产品，能使消费者有亲临现场的感受，通过网络足不出户就能非常全面地了解冰箱，并可