基于Web3D的灯饰协同设计定制系统

冯开平， 潘光洋

（广东工业大学，广东 广州 510006）

传统的灯饰设计是由设计师在企业内部独立完成的，然后再生产销售。客户无法参与到灯饰设计中，使得设计师不能根据每个客户的实际需要设计出合适的产品[1]。利用现代网络技术，使客户与设计师能够协同设计产品，是目前制造业信息化发展的主要方向。

互联网的出现，使3D图形技术发生了深刻的变化，产生了一些专门针对互联网的3D图形技术，我们统称为Web3D技术。而X3D作为新一代互联网3D图形的标准，为互联网3D图形的发展展现了广阔的前景。

本文主要针对灯饰的协同设计系统进行研究，把最新的 Web3D技术引入到制造业，实现灯饰3D模型在Web上的浏览，以及进行模型的交互设计，使客户在灯饰设计师的协助下完成灯饰的定制。

1 系统框架

本系统采用B/S分布式体系结构，这种体系结构简化了客户端软件，统一了用户接口，用户容易轻松掌握，具有通用性、高扩展性。由于所有的开发、维护和升级都集中在服务器端，不涉及客户端，所以系统的开发、维护、升级简单。

图1 基于Web3D的灯饰产品协同设计系统框架图

如图1所示，系统的框架主要由以下4个功能模块组成[2-3]。

1）灯饰展示模块——在浏览器中实现灯饰产品的三维动态查看与实时交互。本系统的灯饰三维模型是使用 3ds max建模，然后再转化为X3D格式。客户可以在浏览器中使用BS Contact浏览插件进行浏览。

2）灯饰设计模块——实现客户与设计师的协同设计。客户或设计师对产品进行设计后，使用Ajax技术把产品的修改信息保存为数据文件，再把数据文件传到设计师或客户的浏览器，然后再根据数据文件重构模型，从而实现产品修改在网络上的同步更新。

3）灯饰管理模块——对产品三维模型与信息进行保存，删除和修改。该模块使用 MySQL构建数据库，以进行对产品信息的管理，包括产品的特点描述、体积、价格等。该数据库还可以保存设计模块中所产生数据文件[4]。

4）灯饰订购模块——厂家对完成设计的产品进行报价，然后用户在网上下订单以及支付费用。本系统使用目前国内最常用的“网银”在线支付平台。当客户完成设计过程后，系统会生成最终订单并且让客户选择“网银”支付方式支付费用。

2 基于Web3D的灯饰协同设计关键技术

X3D是一种专为万维网而设计的三维图像标记语言，全称为可扩展的三维建模语言，是VRML的升级版本。它使用javascript作为交互语言，能够在网页上实现三维模型的浏览与行为交互，但需要相关插件支持。

X3D技术包括了建模技术、行为交互技术和渲染技术。3D模型的建模技术已相当成熟，常用的建模软件工具有3ds max和maya等。X3D的行为交互通过两种方式实现：内部编程接口和外部编程接口。当前客户端浏览器需要安装相应的X3D播放器或插件才能显示由X3D语言编写的三维场景。使用不同的插件，X3D行为交互的实现就会不同，在本灯饰协同设计系统中，我们使用目前流行的 Bs Contact player插件来完成X3D场景的显示渲染工作。

2.1 Bs Contact插件的COM接口

BS Contact插件的 SDK（Software Development Kit）为JavaScript提供一种应用起来非常简单的外部脚本接口—— COM接口，它允许程序员在X3D场景文件中读写使用DEF命名的节点属性值，从X3D场景中接收X3D的输出事件和向X3D场景发送X3D的输入事件。BS Contact插件向客户端浏览器提供的COM接口部分函数如表1所示。

表1 BS Contact的COM接口

作者主要使用了setNodeEventIn这个接口来修改 X3D场景中的灯饰物体。要使用这种方式控制X3D场景的灯饰，过程如图2所示，具体操作步骤如下：

1）在编写灯饰物体之前，使用 prototype节点将灯饰物体封装成一个新的X3D节点lamp，将重要的灯饰参数设置为lamp的接口属性，如：DEF、color、translation、lampholder_radias 和lampholder_material等。编写场景时，使用lamp节点定义灯饰实体，设置其的属性DEF，以标识此实体。

2）在网页上使用 embed标签引入 BS contact Player组件，使得网页可显示X3D的场景，向网页提供BS contact Player的COM接口。

3）在网页上使用 javascript脚本调用 BS contact player组件的COM接口，控制X3D场景。

图2 页面与场景的交互

2.2 X3D的交互技术

X3D的交互技术可分为2种方式：场景中物体之间的交互、场景与网页之间的交互[5]。在实现场景中物体之间的交互，可使用 X3D的script节点和route节点。使用script节点时，将script节点比作一个人的大脑，由其来直接控制X3D场景的物体，将X3D场景中的各物体模型连接为有机的整体。场景与网页之间的交互使用Ajax与BS Contact的COM接口实现。使用Ajax技术获取动态数据，然后通过BS Contact的COM接口将修改应用到场景中。当客户执行修改动作时，Ajax能做到在客户没察觉的情况下修改场景，做到局部刷新的效果，实现实时修改场景。

3 系统主要功能的实现

本节就灯饰协同设计系统原型的几个主要功能展开讲述，包括灯饰局部的修改以及场景在多客户端上的同步。

3.1 灯饰局部的修改

灯饰的类型不同，需要为系统创建不同的灯饰模型。以由灯头、灯柱和灯座组成的灯饰模型为例，讲述灯饰局部的修改功能的实现。灯饰局部修改功能实现的步骤为：

1）在原型文件 lamproto.X3D 中使用ProtoDeclare节点声明 Lamp的扩展模型。实现灯头和灯座的修改，需要将灯头和灯座设置为一个接口，使得程序员可在编程时使用接口修改灯饰的局部。

2）在场景文件 main.X3D 中使用 Extern-ProtoDeclare引入lampproto.X3D中Lamp节点的声明，并将Lamp节点命名Lamp供ProtoInstance节点使用。最后ProtoInstance节点将Lamp节点实例化，创建灯饰实例模型lampInst。实例化代码如下所示：

3）修改组成部分的方法。单击组成部分的图片按钮，如灯头2图片，则网页执行如下代码：

setNodeEventIn(“lampHeadInline”,”url”,’[“pa rt/lampHead2.X3D”

“http://localhost/part/lampHead2.X3D”]’);

4）修改组成部分的位置。有些组成部分修改之后，不能和其他部分很好地结合，这时需要人工调整灯饰局部的位置。由于在设计Lamp扩展节点时，设计了记录灯头和灯座的位置属性，它们作为 Lamp节点的属性为 lampHeadTsl和lampDownTsl。在网页上输入灯头的位置值x、y和z值，然后执行如下javascript代码修改灯头的位置：

setNodeEventIn(“lampInst”,”lampHeadTsl”,”x y z”)；

3.2 实现多客户端同步显示场景

Bs contact player播放器在显示X3D场景时，将X3D场景下载到客户端，在客户端修改X3D场景并不会影响其他客户端上相同路径的 X3D场景。那么设计者无法查看当前请求协助的场景，仅能查看到没有经过用户修改的场景。要实现多客户端同步显示场景，可将用户的修改数据保存到数据库中，显示场景时从数据库中读取指定场景的修改数据并将修改数据作用于场景中以达到场景的同步，逻辑框图如图3所示。

图3 实现多客户端同步显示场景

动作数据也就在客户端中执行的COM接口语句，如“setNodeEventIn(nodeName, fieldname,value);”。此 setNodeEventIn函数是页面上的javascript全局函数，完成调用BS Contact player的COM接口setNodeEventIn的操作。

客户端修改场景时，动作数据通过php页面保存到Mysql数据库中。为了能在场景中显示修改后的场景，使用了 Ajax局部刷新技术，使得页面读取数据库中的动作数据，并执行对本地场景的修改，使用的刷新代码如下所示：

这种交互方式可以减少带宽的负担，使得多个客户/设计师在共享工作空间中对产品的三维模型进行设计、修改和查看，提高了产品设计速度和质量。修改场景时，多客户端的场景同步实时显示。

3.3 系统实现的主界面

应用综上所述的技术以及实现的逻辑方法，创建一个灯饰协同设计系统雏形，其功能主界面如图4所示。

图4 灯饰定制系统功能主界面

4 结束语

最近几年来，灯饰行业快速发展是不争的事实，个性灯饰的增长尤为迅速。人们越来越注重灯具的造型、风格和色彩，越来越追求艺术效果，灯饰与房间风格的统一。本文讨论了使用Web3D技术构建一个灯饰协同设计系统，使人们可以通过网络在设计师的协助下设计出适合自已的个性灯饰，对灯饰行业的发展注入了新元素。

[1]赵 东, 王凤岐, 王 磊. 基于 WEB的个性化定制系统研究现状及发展趋势[J]. 组合机床与自动化加工技术, 2004, (1): 60-62.

[2]Yang Yu, Zhang Xiaodong, Liu Fei, et al. An internet-based product customization system for CIM [J]. Robotics and Computer-Integrated Manufacturing, 2005, 21(2): 109-118.

[3]王江春, 张中生. 基于虚拟现实的客车在线定制系统[J]. 系统仿真学报, 2005, 17(4): 930-935.

[4]袁清珂, 何圣华, 李炳田. 基于网络化制造个性化产品协同定制系统的研究[J]. 机电工程技术, 2004,33(1): 16-18.

[5]黄正军, 周建中. 基于X3D的虚拟场景动态交互技术研究[J]. 计算机工程与科学, 2007, 29(7): 55-57.