基于X3DOM的工艺品外观定制系统研究

肖振球，梁 嘉，罗予东

(1.嘉应学院计算机学院，广东梅州514015;2.嘉应学院美术学院，广东梅州514015)

0 引言

外观作为事物的外在形象，给人以第一视觉印象.［1］工艺品是以外观形象为主要价值体现的消费产品，所以外观设计在工艺品生产中至关重要.现今，随着客户的需求多样化、个性化和品味化以及仿真技术的迅速发展，产品交互定制研究已成为国内外学术界研究及企业应用的重点.客户通过定制设计的手段参与产品的设计开发，生产企业可以为客户量身定做个性化的产品和服务.［2］产品外观定制可增强客户参与度和体验感，是生产企业和客户沟通的核心.目前有关产品在线定制的研究大多停留在比国外相对滞后的Cult3D、Java3D、Flash3D、Virtools等WEB3D技术的应用，且多数集中在产品功能、性能和参数定制的层面上，对于产品外观形态交互设计定制研究较少.［3］

X3DOM是由国际WEB3D组织公开的一个开源运行环境，以JavaScript与WebGL实现.X3DOM的前身是X3D语言，它对X3D进行了一些修改和扩充，形成标准文件规范和运行时架构.与其他WEB3D技术相比，X3DOM技术新颖，优势突出，它无需插件，开放性强，支持逼真的3D图形场景在浏览器中的呈现.可以通过在标准的HTML5 DOM中加入X3D格式的XML元素，实现将X3D格式的3D模型嵌入到HTML页面，并通过浏览器解析，实现三维图形的绘制、渲染，实时为用户提供交互场景.X3DOM作为一种新的国际前沿应用，其在国内的应用和开发还比较薄弱.

基于X3DOM的工艺品外观定制研究是针对山区工艺品生产企业进行的，目的是使山区的工艺产品既能保留山区传统手工艺品的特色，又能满足市场多变的需求，高效率、低成本地为用户提供个性化服务，增加工艺产品技术含量和市场竞争力.

1 系统设计

1.1 设计思路

工艺品外观交互定制设计首先考虑把产品看作元素的组合，划分模块反映元素，使其有序关联.其次，通过产品划分来建立产品功能结构，生成对应的模块实例库以备定制系统使用.客户可按模块依次确定设计方案.最后，运用X3DOM技术，在线为客户提供多种的3D虚拟工艺产品，向客户全方位展示，使客户通过WEB交互功能，远在千里也能通过互联网地对产品造型、材质、色彩、纹理、装饰图案、LOGO等外观方面自由设计［4］，从而提高产品设计的个性化和增强客户的体验感.

1.2 功能结构

功能模块主要按产品相关参数或者功能部件划分，其中对产品外部覆盖部件(外型)为造型模块，含装饰元素的部件为装饰模块，从视觉的角度可分为材质、色彩、质感、图案等主要功能结构.该结构中，客户通过浏览器访问定制系统进行外观定制，外观定制分为初级定制和高级定制，初级定制有两种选择:一是客户可以在设计师预先设计好的3D工艺产品模型库中选择产品模型进行定制;二是半自助定制，即客户可以把已供模型和自行设计中结合起来组合设计定制.高级定制是完全依照客户需求的自定义设计定制.客户进入定制平台界面可以在定制界面中预设好对产品功能的要求，而后进入细节定制环节，各级定制都提供工艺品形态属性配置选择，主要设置有:造型定制、材质定制、色彩定制、纹理定制、装饰图案定制(如图1)［5］.单个模块的方案工作流程图(如图2).

图1 外观设计定制功能模块

2 系统实现

2.1 关键技术实现

系统关键技术之一是，工艺品三维模型的生成可由3DS Max或X3DOM建立模型.X3DOM提供了对基本几何模型的建模，但是对于一些复杂的模型，则需要使用3Dmax等工具建模.模型建立后，可通过VRML虚拟现实技术把模型转换输出为WRL，进一步转换为X3D场景，同时把X3D文件格式存储在后台模型数据库中等待指令调用，以方便用户对模型进行贴图、动画、交互等设置.在使用X3DOM构建三维场景中，系统引入支持实时渲染的x3dom.js语言包，并调用X3D中插补器、传感器，结合JavaScript语言对Dom节点进行控制，以实现三维模型的造型、材质、颜色、纹理、装饰图案等变换功能，用户可在浏览器中操作相关属性，以完成工艺品的在线定制.图3为定制平台技术路线图.

系统关键技术之二是，三维造型节点树的生成可用坐标变换节点Transform创建若干个新坐标系，并在新坐标系上建立不同的节点，使新节点之间不重复叠加.坐标转换的语言描述如下:

新坐标系node01与原坐标系的距离是:＇－12.2044－1.1207－8.421＇，新坐标系相对于原坐标系旋转角度为:＇1－23－3.324＇.

这里，通过传感器节点MenuSensor，可形成交互菜单;利用传感器节点TimeSensor设定DEF，可用于指示三维场景时空结点方位，加入对MenuSensor控制的Javacript脚本语言后，可创建右键菜单功能.从而实现对BsContact浏览器菜单的扩展.各传感器节点组成交互功能的路由如图4所示.

最后，系统调用了WebGL的3DAPI来实现实时渲染，在无需任何插件及辅助程序的情况下便可以实现工艺品外观设计中的颜色、图案、纹理等的定制.

2.2 运行模式

定制平台是通过互联网发布运行的，其运行模式核心采用浏览器/服务器(B/S)模式［6］.该模式的特点体现在客户端(主机)的操作界面直观灵活，以Internet Explorer或Firefox浏览器为客户端，客户在异地通过访问互联网就可实现满意的工艺产品交互设计与定制.用户通过安装VRML(虚拟现实建模语言)相关插件，把X3D模型、JavaScript语句等嵌入HTML5标准的网页，在浏览器里浏览并定制产品，以实现客户与虚拟产品之间的交互.服务器端采用TOMCAT应用服务器进行定制平台网络发布，以MYSQL作为平台数据运行和维护终端数据库，进行用户及产品设计信息的云数据处理.如图5所示.

图5 运行模式

2.3 系统应用

下面以某企业的围龙屋造型的藤篮为例，实现工艺产品实时交互设计定制.用户通过登录工艺品的定制界面，利用鼠标和键盘对工艺品的参数要求进行自主设计，即时实现对产品外观的预浏览.工艺品外观的定制界面设计了造型、材料、色彩、纹理和装饰图案的交互定制，还提供导入图片功能，让客户在设计中可以运用本地图片自主设计产品的样式.主要的代码如下:

本例中，将功能扩展与X3DOM场景相互联系.客户访问时，首先通过HTML加载BsContact浏览器，使脚本嵌入浏览器中，执行事件响应操作时便可激活后台的脚本，从而实现对场景的操作.效果如图6所示.

3 结语

X3DOM与其它的三维技术相比，采用XML及JavaScript编码具有语法相对简单、三维场景建立方便，功能强大，便于网上发布且实时渲染浏览速度快等优点.本文充分结合虚拟现实语言，整合符合互联网HTML5规范的技术应用，并提出了基于X3DOM的关键技术与运行模式，并在企业工程实践中得以应用.面向X3DOM的三维交互设计与定制方面的研究应用前景宽广，应通过不断对虚拟现实技术的深入研究，在线设计出更复杂更逼真三维模型，以满足企业和客户需求.

［1］张珣，干静，蒋春林.面向产品外观的定制设计方法研究［J］.机械设计与制造，2010，3(3):252－254.

［2］程振波，肖刚.基于虚拟技术的产品定制设计平台研究［J］.机械科学与技术，2003(3):389－392.

［3］王伟东，余华强，赵法信.基于Web的3D虚拟人智能导诊系统设计［J］.湛江师范学院学报，2012，33(6):123－126.

［4］郭磊，鞠盈盈，安静.基于Cult3D的陶瓷产品网络定制系统关键技术［J］.中国陶瓷，2008，44(7):40－42.

［5］李小丽，李晓玲，薛艳敏.交互式虚拟包装定制系统的关键技术研究［J］.包装工程，2005(4):106－107.

［6］杨凌云，郭勇.基于PHP的包装企业门户网站设计与实现［J］.包装工程，2013，34(5):111－114.

［7］web3D Consortium［EB/OL］.http://www.web3d.org/realtime－3d/(accessed on June 23，2011).

［8］ANDREAS ANYURU.WebGL高级编程——开发Web 3D图形［M］.吴文国，译.北京:清华大学出版社，2013.

［9］BEHR J，JUNG Y.A scalable architecture for the HTML5/ X3D integration model X3DOM［J］.Web3D＇10 Proceedings of the 15th International Conference on Web 3D Technology ACM New York，NY，USAc2010，Pages 185－194.

［10］ZHANG JIANPING，YANG UHUI.Design and Implementation of Virtual Museum base on Wed3D［J］.Transctions on Edutainmene III.2010，3(1):154－165.