基于Web3D的产品协同设计系统的设计与实现

邵秀丽 于奇奇 杨静雅 任志娟

摘 要： 为了简化阀门设计过程、整合异地不同用户的想法到阀门产品的创新设计中，提出构建基于Web3D的阀门协同设计系统。系统运用nodeJs+socket.io即时通信框架进行客户端与服务器端即时通信；采用封装了Web GL的Web 3D交互技术Three.js，实现了在Web 3D场景中阀门模型的交互设计，以实现异地用户客户端的设计成果的同步。并解决了多用户自由操作引起的冲突问题，使设计过程能顺利进行。

关键词： 协同设计； Web 3D设计； 冲突处理

中图分类号：TP311 文献标志码：A 文章编号：1006-8228（2018）07-41-04

Abstract： In order to simplify the valve design process and integrate the ideals of different users in different locations into the innovative design of valve products， this paper proposes to construct a valve collaborative design system based on Web3D. The system uses the instant communication framework nodeJs+socket.io to perform instant communication between the client and the server. Using the Web 3D interaction technology Three.js that encapsulates the Web GL， the interaction design of the valve model in the web 3D scene is realized， and the synchronization of client design results of remote users is realized too. For the smooth progress of the design process， the conflict problem caused by multi-user free operation is solved.

Key words： collaborative design； Web3D； conflict resolution

0 引言

传统的阀门设计过程其主要参与者是企业内的员工，整个设计过程相对封闭，一方面不能够很好的结合用户及其他设计人员的观点[1-3]，另一方面一定程度制约着阀门的质量，影响了企业的生产力。本文给出基于互联网的3D场景的阀门交互设计解决方案，在该方案下对场景交互设计、零件库的加载、场景中零件模型的添加与编辑、3D场景操作集的实现细节进行了具体的介绍。另外，对设计过程中涉及的恢复性问题如：历史记录的保存与恢复、“后来者”同步问题的解决、上下步操作的回滚给出了解决方案并进行了实现。通过该系统达到简化阀门设计过程、集成不同角色的用户参与到设计过程的目标。

1 系统概述

本系统采用B/S结构，实现了3D场景中的零件拼装设计[4-6]。处于异地的用户将维护的零件模型简图加载到3D方案下的设计窗口进行拼装选择；用户可以对导入3D场景中的零件模型进行零件大小、位置、旋转角度的编辑，提供了清空场景、删除选中物体、上下步操作的回滚等基本操作。另外，系统提供历史记录的保存与恢复过程，支持设计场景的整体保存与恢复动作。

2 系统主要功能设计及实现

2.1 Web 3D的设计场景的实现

为了向用户提供更专业、更直观的用户体验，系统实现了基于Web 3D场景的模型展示、模型编辑的功能。参与设计者在设计界面进行零件选择或者上传线下做好的CAD零件模型，在3D场景中完成零件的基本编辑操作，包括场景中零件的移除、场景的清空、上下步操作的回滚、设计过程中历史版本的保存和恢复等功能，以更好的支持用户在3D场景中的自行车设计活动。[7]最终，完成零件模型在场景中拼装成产品的个性化设计过程。具体实现流程如图1所示。

第一步：場景与场景的内部构件创建

⑴ 创建初始化场景，使用Three.js类库的THREE.Scene（）方法创建初始化场景对象scene；

⑵ 相机的添加，使用类库的THREE.PerspectiveCamera（）方法创建场景中的远景相机，指定场景查看角度，设置相机摆放位置position，并通过lookAt（）函数设置函数观察点，最后将其添加到⑴场景场景对象中，即完成场景中模型的添加；

⑶ 参照网络的添加，使用类库的THREE.GridHelper（）方法创建场景网格，通过传递参数设置网格的尺寸、两条线的间隔、中心线条以及其他非中心线条的颜色，并设置网格位置，本次设置场景的中心位置坐标（0，0，0）的位置，最后将其添加到场景中[8-9]。

第二步：场景中的光源的设置

⑴ 环境光的添加，通类库的THREE.AmbientLight（0x444444）方法创建环境光对象，其中参数为环境光颜色，本次采用灰色环境光，创建完后将环境光添加到场景中；

⑵ 平行光的添加，通过类库的THREE.DirectionLight（0xffeed）创建平行光对象，其中参数为平行光颜色，并设置平行光方位，调用平行光对象的set（20，20，20）.normalize（）进行设置，最后将平行光对象添加到场景中。

第三步：场景的渲染显示

场景的渲染在整个交互场景的构建工作中有重要的作用，决定了场景中组件以及模型的显示。使用类库的THREE.WebGLRenderer（）创建渲染器对象，使用render（）方法设定参数场景对象scene和相机对象camera，对场景中的构件进行渲染显示。

第四步：设计场景用户交互事件的添加

⑴ 场景中物体的360度查看，查看角度随鼠标的拖拽而改变。旋转控制设置THREE.OrbitControls（camera）方法，为场景相机对象添加旋转属性，相机的查看视角可随鼠标的拖动而改变；

⑵ 添加零件模型的编辑事件，通过类库的THREE.TransformControls（）方法创建编辑对象，设置参数camera、renderer.domElement为场景中渲染的物体添加编辑事件；

⑶ 添加场景中物体点击捕获事件，首先为渲染器设置mousemove事件和mousedown事件；

⑷ 添加键盘快捷键事件，为浏览器窗体对象添加键盘的‘keydown事件，并通过对应case选项，对场景中transformControls编辑对象通过setMode方法更改焦点物体的编辑模式。

最后，建立线程实时对场景进行渲染。

2.2 协同控制的设计及实现

协作任务创建后[10]，即可按照约定好的协作开始时间展开自行车的协作设计，进行设计过程中，针对可能出现的并发冲突，采用一定的协同控制机制避免此种现象的发生，使协作活动有序的进行。该协同机制，是为协作设计窗口设置一个令牌，获得该令牌的用户拥有对该设计窗口操作的权利，其他用户不得进行操作。并在令牌式策略的控制的基础上实现了集中方式、自由方式，该协作任务的负责人可随时根据活动进行的需要灵活的进行切换。

2.2.1 自由式控制方式

多用户自由对设计对象进行设计操作，存在用户同时对同一零件的同一属性进行操作，而导致操作冲突的现象为解决该并发冲突问题，本文设计了一种以到达服务器的时间为序的先来先处理的冲突解决方案：自定义用户操作的缓存机制，将时间相近的一系列操作请求视为可能产生冲突的并发操作集，每次并发的处理均先执行操作集中的第一个操作请求，其后逐个对并发操作集中的操作请求进行冲突的判断与处理。并发操作集执行完毕，清空本次存储结果，开始下一次并发的处理。

该方案下冲突处理流程如图2所示。

2.2.2 集中控制方式

协作组内用户操作令牌的申请，统一分发至活动负责人处，负责人根据申请情况，选定用户为其分配操作令牌。一旦分配，不得再次为第二人分配令牌，直到该用户因时间片用完或者自行释放为止，或者可由负责人强制剥夺设计人操作令牌，被释放的令牌可继续分配给组内其他用户。

⑴ 协作组内用户操作令牌的申请

活动进行过程中，协作组内普通用户（除负责人外）可随时对操作令牌进行申请，由负责人为其分配操作令牌。

具体实现步骤如下：

① 用户申请操作令牌的占用权。采用本文即时通信机制类库中的socket.emit（）方法，设置发送标识‘getCentralRight；

② 服务器端根据对应标识采用客户端socket对象的socket.on方法接收客户端发送信息，解析出负责人id，根据负责人id找到服务器存储负责人对应socket对象（通信机制的建立时存储），完成后，调用负责人socket对象的emit（）方法设置申请标识‘applyRight，并将申请人id、申请时间、申请人名称发送至负责人对应客户端，交由负责人去指定分配用户；

③ 负责人客户端根据‘applyRight标识获取申请信息，并在页面申请列表中显示。

④ 服务器根据‘assignOperate标识接收负责人分配操作令牌信息，并根据用户id获取对应socket对象，分配完毕可借助该socket对象向对应客户端发送信息。其次，调用封装分配操作令牌接口，进行令牌权限的分配。

⑵ 活动负责人强制获取操作令牌

用户进行操作期间，活动负责人可进行操作令牌的强制获取。获取后，设计界面的操作权重新归负责人所有。

具体实现步骤如下：

① 用户进行设计操作期间，设置除负责人外的其他用戶客户端均不具有再次获取操作令牌的权限，负责人强制获取操作令牌，使用本文通信机制中发送信息接口将协作活动id发送至NodeJs服务器端[11]；

② 服务器端根据对应标识接收用户强制获取信息后，清空该协作活动令牌占用，停止活动对应计时器，采用socket.broadcast.to（activityid）.emit（）和socket.emit（）方法结合回收通知标识‘userRight通知组内客户端回收结果；

③ 客户端根据‘userRight标识接收服务回收结果信息，根据对应结果设置设计界面是否可操作。

⑶ 操作人操作令牌的释放

获取协作活动操作令牌的协作组内用户（集中式活动负责人除外），在进行设计操作过程中，可随时进行操作令牌的释放。本文实现的三种控制方式均遵循该过程。具体实现步骤如下：

① 用户申请释放操作令牌。使用通信机制类库接口将用户id、用户名称、用户协作组id、控制类别标识发送到NodeJs服务器端；

② 服务器端根据释放标识接收用户释放申请信息，首先，清空对应协作活动的令牌占用，停止活动计时器；其次，判断控制类别，若是集中式或是自由式直接向服务器发送释放成功信息；若是轮转式从用户信息列表中取出下一位用户的用户id、用户名称、用户对应socket对象，调用本文分配令牌接口为该用户分配操作令牌。

③ 客户端根据接收到的释放结果，或是轮转结果信息，根据信息设置设计界面可操作与可申请情况。若是集中或自由，设置设计界面不可用，申请按钮可用；若是轮转，分配用户拥有设计界面操作权，释放按钮可用，组内其他用户不得操作，申请按钮不可用。

2.2.3 先到先得控制方式

协作组内用户可随时自由的争夺操作令牌，先到先得。以时间为标准，服务器为第一个申请的用户分配操作令牌。分配后，其他人不得再次申请，直到操作令牌被该用户释放或者操作时间片用完，方可展开下一次自由争夺。实现流程略。

该方式下，令牌的申请与分配的具体实现过程：客户端用户申请操作令牌，将申请信息（用户id、协作活动id、用戶名称）发送到服务端，服务器在为申请用户分配操作权时，需要先判断该活动令牌是否已被占用，若未占用，调用操作令牌分配接口，为用户分配该活动操作令牌；否则发出拒绝通知。

2.3 信息交流机制的设计

客户端与服务器端为多对一的关系，服务器端应用程序server.js必须时刻处于运行状态，该程序一经开启时刻处于运行状态。服务器与客户端之间的即时通信就可以随时进行。其主要设计机制是：A.服务器端应用程序通过调用监听接口，并指定监听信息标志，时刻监听带有该标志的客户端操作权控制请求和操作请求信息，客户端一旦发送对应请求信息，则服务器端程序server.js中对应监听程序接收用户请求信息；B.客户端应用程序通过调用监听接口，同样指定监听信息标志，时刻监听带有该标志的服务器端操作权控制以及操作控制反馈的结果信息，服务器端一旦发送对应反馈信息，则客户端应用程序中对应监听程序接收服务器端反馈结果信息。

3 软件测试

本节对阀门协同设计模块的即时通信连接使用jmeter工具进行了压力测试。最后，对系统的主要功能进行了功能性测试。

连接的性能测试是在极限情况下对Node.js服务器建立的即时通信websocket连接进行的压力测试，用来检查软件长期的稳定性，整个测试过程主要是增加连接的运载负荷，直到出现瓶颈不能达成连接为止。

本次的测试工具为：

apache-jmeter-3.2和JMeterWebSocketSampler-

1.0.2-SNAPSHOT.jar插件

测试环境为：

①操作系统：windows 8.1；

②服务器配置：处理器 Intel i7-4790 CPU@3.6GH；内存：8G；系统类型：64位；软件环境：Node.js服务，socket.io即时通信插件

本次性能测试主要对并发连接的压力测试。

并发连接压力测试结果：并发用户量为1000时，平台的响应时间约为6s，且未出现连接错误，达到连接的并发稳定性要求；并发线程数超过2000，平均响应时间不理想，达到并发连接瓶颈。

4 结束语

本文针对在线协同设计的Web 3D设计方案给出了解决方案。同时，在借助Node.js+socket.io即时通信技术的基础上，设计了一种多用户自由操作的冲突处理策略以及同时只有一人操作的操作权分配机制，使协同设计活动能有效的进行。并实现了设计成果在参与设计者浏览器中实时呈现。

本系统还需要在以下几个方面进行改进：

⑴ 对设计过程中对零件拼接合理性、安全性的检测；

⑵ 使用socket.io即时通信框架，解决客户端与服务端的即时通信问题，该框架下的服务器端的承载能力有限，最多只能容纳3000个long-polling方式的客户端的连接，随着平台的推广存在瓶颈。

参考文献（References）：

[1] 董仁扬.三维机械设计软件MDT4O增强版培训教程AutOdesk[D].中国西部大学，2000.

[2] 殷国富，陈永华.计算机辅助设计技术及应用[M]. 科学出版社，2000.

[3] 孔庆复.计算机辅助设计与制造[M].哈尔滨工业出版社，1999.

[4] 朱晓宇，聂颖.基于Socket.io构建Web协同标绘应用[J].软件，2016.37（1）：110-113

[5] 潘康华.基于MBD的机械产品三维设计标准关键技术与应用研究[D].机械科学研究总院，2012.

[6] Proctor Pall， Wash Everett. Boeing Rolls Out 777 To Tentative Market[J].AviationWeek & Space Technology，1994.140（15）：36-39

[7] I. S. Jacobs and C. P. Bean， "Fine particles， thin films and exchange anisotropy，" in Magnetism， vol. III， G. T. Rado and H. Suhl， Eds. New York： Academic，1963：271-350

[8] M Klein， "Supporting onflict resolution in cooper-tivedesign systems"， Artificial Intelligence in Engineering，1989.21（6）：1379-1390

[9] R. Nicole， "Title of paper with only first word capitalized，"J. Name Stand. Abbrev.， in press.

[10] Y. Yorozu， M. Hirano， K. Oka， and Y. Tagawa， "Electronspectroscopy studies on magneto-optical media and plastic substrate interface，" IEEE Transl. J. Magn. Japan， vol. 2， pp. 740-741， August 1987 [Digests 9th Annual Conf. Magnetics Japan， p. 301， 1982].

[11] M. Young， The Technical Writer's Handbook. Mill Valley，CA： University Science，1989.