1 链轮参数化设计系统总体框架
链轮参数化设计系统总体框架如图1所示，其中：
1）离线模块采用Three.js进行开发，由浏览器直接调用GPU（graphics processing unit，图形处理器）实时渲染以实现链轮参数化建模。该建模过程无需与服务器进行交互，省略了各类CAD软件作为中间载体的过程。此部分包括链轮参数化设计、链轮参数化选型和链轮模型下载等功能，都是在离线模式下实现的底层功能。
2）在线模块采用ASP.Net进行开发，将离线模块集成在此模块中，完成参数化设计与局域网的对接，方便企业用户在局域网环境下共享信息。
3）IIS服务器组件可以对企业客户端提出的功能进行服务器端逻辑与业务处理。
4）SQL Server数据库实现对用户和文件的信息存储，以便IIS服务器组件对各类信息进行调用。
2 链轮参数化设计理论
2.1 控制参数
2.2 WebGL参数化设计方法
WebGL第三方库（Three.js）能够提供强大的功能，简单地说，它能通过Javascript语言创建复杂的三维图形并且能够添加控制函数从而实现参数
化[12] 。基于WebGL第三方库（Three.js）引擎的参数化设计是通过编程将所有参数通过控制函数设置相应的取值范围从而达到参数化目
的[12] 。但其参数化难度在于图形的建立以及坐标的选取，例如链轮链窝的设计不仅仅要找到链窝各参数之间的关系，还要通过整合分析参数在Three.js下找到相对应的三维图形,而建立这样一个三维图形不仅仅需要分析参数之间的联系，还需要找到准确的坐标，最后才能进行参数化设计。使用WebGL第三方库（Three.js）的基本条件
为[13] ：1）使用Three.js创建一个自定义模型时，工程人员只需要一个文本编辑器以及一个浏览器，本文所涉及的所有代码都是在Sublime Text Editor编辑器中进行编写。在浏览器选择上，几乎所有浏览器都支持WebGL。
2）创建HTML页面框架，实现代码运行。其基本框架如下：
<!DOCTYPE html>
<html><head><style>
body {--设置浏览器页面比例大小-- }
</style></head>
<body>--进行建模编程的区域</body>
</html>
工程人员只需要在<body>---</body>内进行编程即可获得自定义模型。
3 链轮参数化设计方法
3.1 链轮模型的初步设计
如图3(a)所示是链轮一个单截齿的二维模型，点1，2，…，9的坐标可以通过参数尺寸关系求得。
绘制链轮自定义二维模型时，在Three.js中先构造如下函数：
Var shape=createMesh(new THREE.Shape-
Geometry(drawShape()));
以下绘制二维模型的代码都在drawShape()中进行编写。
首先需要指定一个起始点，指定图3（a）中点1：moveTo（x1，y1） //绘制从点1开始；
点1到点6都是通过线段相连，在本方法中，能够实现线段相连的代码为：
lineTo（x，y） //依次使用lineTo（）函数将点1到点6用线段连接；
如图3(b)所示，点6到点7可以看作是一段圆弧（即短齿根弧），想要实现这样一段弧就可以使用absEllipse（）函数：
absEllipse(ox,oy,R,0,Math·PI*n,aClockwise)；
其中的属性为:
ox，oy //圆心o与点6坐标之间的偏移量；
R //指定该圆的大小；
0,Math·PI*n //定义圆弧的长度，Math·PI*2指的是整圆，n的取值范围为0～2。
最后通过splineThru（）函数将点7，8，9连接，其代码形式为：
shape.splineThru（
[new THREE.Vector2(x7,y7);
new THREE.Vector2(x8,y8);
new THREE.Vector2(x9,y9);]）
splineThru（） //沿着点7，8，9绘制一条光滑的曲线，起始点为点7。
至此，链轮的二维模型[drawShape（）]绘制完成。
THREE.ExtrudeGeometry（）是最通用的拉伸图形方法函数，应用THREE.ExtrudeGeometry将链轮的二维模型转换成三维模型。
首先，设置拉伸属性，即options属性，代码为：
var options={amount,
curveSegments，steps，extrudePath}；
其中的属性为：
amount //图形拉伸厚度，默认值为100；
curveSegments //曲线图形拉伸时的光滑度属性，其值越大越光滑，默认值为12；
steps //定义拉伸体被分成多少段，默认值为1；
extrudePath //指定图形沿着什么路径拉伸，默认为沿z轴拉伸。
设置拉伸属性后将链轮二维模型[drawShape（）]连同options属性对象一起传递给THREE.ExtrudeGeometry的构造函数，即可完成拉伸，将二维模型转换为三维模型，代码为：
shape=createMesh(newTHREE.ExtrudeGeometry(drawShape(), options));
3.2 齿槽设计
如图4(a)所示，利用shape构建3.1节中二维链轮拉伸后的链轮模型，利用drawing构建图4（a）中镶嵌的圆环。为了设计齿槽，需要将利用drawing和shape构建的模型的重合部分隐藏，如图4（b）所示。
在Three.js中要实现此功能，可以直接使用Three.js的扩展库THREEBSP,这个扩展库提供以下3个函数：intersect（相交）、union（联合）、subtract（相减）。
在设计链轮齿槽中主要使用subtract函数，这个函数是用于在第1个几何体中减去2个几何体交叠的部分从而创建新的几何体。实现这一功能的代码如下。
首先，建立drawing：
Var drawing=createMesh(new THREE.RingGeometry(innerRadius,outerRadius, height，Segments,0，Math·PI*2));
innerRadius //内圆环半径；
outerRadius //外圆环半径；
Height //圆环厚度；
Segments //圆环圆弧面的光滑度，其值越大越光滑；
0，Math·PI*2 //圆环的完整度，以形成一个封闭的圆环。
其次，使用subtract函数实现drawing与shape的隐藏关系：
Var resultBSP1 //使用BSP库在浏览器中的输出结果，设为BSP1；
resultBSP1=shapeBSP.subtract(drawingBSP） //输出结果BSP1是BSP库中subtract函数所表达的结果；
result=resultBSP1.toMesh() //最终在浏览器中表达输出结果，呈现shape与drawing的隐藏关系。
最终在浏览器中实现齿槽设计，如图4(b)所示。
3.3 链窝设计
3.3.1 应用CAD软件进行链窝结构分析
通过编程进行链窝设计是难点。由于链窝的轨迹方程难以确定，因此通过求解方程的方法对链窝进行设计存在很大的困难，故采用SolidWorks对链窝进行建模分析。
按照《MT 231—1991中华人民共和国煤炭行业标准矿用刮板输送机驱动链轮》设计标准，做如图5(a)示意图，已知链窝中心距A=68 mm，链窝中心至链窝底平面距离H=101 mm，短齿根部圆弧半径R5= 7 mm，所以能够确定2个直径为14 mm的圆1和圆2，以圆2的圆心做直径为72 mm的同心圆（圆4），以及做与圆2相切的直径为58 mm的圆3，最后将圆1、圆2以及圆3的圆心相连，这条连接的弧线即为链窝上半部分扫描路径，再通过裁剪即可得到弧线nq的扫描路径，如图5(a)；同时，在水平方向做过n点的半径为25 mm的圆（链窝弧半径为25 mm）,即为扫描轮廓，如图5（b）左所示。最终通过切除、扫描得到图5（b）右所示的模型。
图5(b)左中，选取点t到点n之间的弧长，并将多余线段裁剪，再以点n为起始点做一条长为25 mm的水平线段rn（链窝弧的半径为25 mm，要想旋转得到半径为25 mm的弧槽，就需要这样一条水平直线进行旋转切除），再以点t为起始点做一条水平线段ts，最后将2条水平线段相连得到线段rs。线段rs为旋转路径，线段rn、弧nt以及线段ts为旋转轮廓，最终通过切除、旋转即可得到图5（b）右所示的模型。
通过以上对链窝建模的分析，可以看到链窝的生成实则是通过图5（b）右所示的圆台状三维图形和图5（c）右所示的圆环状三维图形所确定的，所以在Three.js中只要能够通过编程的方式建立这2个三维图形，就能实现链窝的设计。同时对于不同尺寸的链轮，链窝尺寸也不同，所以在Three.js中还需要对这2个三维图形进行参数化。
3.3.2 在THREE.js中实现链窝参数化
1）建立图5(b)所示圆台模型。
在Three.js中，需先绘制一个圆柱体，对该圆柱体进行相应的参数化使它成为圆台，即可获得所需模型。CylinderGeometry（）是Three.js中一个常用的建立几何模型的函数，通过改变参数可以得到圆台模型。
创建圆台模型的代码为：
var cylinder=createMesh(new THREE.CylinderGeometry(radiusTop,radiusBottom, hight，radialSegements, tubularSegements))；
其参数分别是：
radiusTop //圆柱顶面圆半径；
radiusBottom //圆柱底面圆半径；
hight //圆柱高；
radialSegements、 tubularSegements //表面光滑度值。
这段代码在不添加任何参数的情况下创建的是一个圆柱体，通过添加、改变参数即可获得自定义模型。
2）圆台模型参数化。
首先，要创建一个指令功能使模型能够进行参数化：
var controls=new function() //定义控制功能。
接下来，为使模型参数的数值改变，要设置相应的数值变换修改函数，即创建一个控制台，所有参数的修改都在控制台里进行修改。
var gui=new dat.GUI() //为了进行参数变换，建立控制台。
最后对模型参数进行具体的数值修改:
gui.add(controls,’radiusTop',0,n).onChange(controls.redraw) //对圆柱体顶面圆半径作数值修改；
gui.add(controls,'radiusBottom',0,n).onChange(controls.redraw); //对圆柱体底面圆半径作数值修改；
gui.add(controls,'height',0,n).onChange(controls.redraw); //对圆柱体高作数值修改。
上述3段代码是对模型顶面、底面半径以及模型高进行具体的变参赋值，3段代码中的“0，n”指的是其赋值取值范围。
gui.add(controls,'radialSegments',x,y).step(1).onChange(controls.redraw); //对圆柱体侧面曲面的光滑程度进行设置，设置值越大越光滑。
该代码中的“x, y”分别指曲面沿着x轴、y轴的光滑程度，其值越大，曲面越光滑。
3）建立图5(c)所示圆环模型。
在Three.js中，通过分析可以找到相对应的初始模型是torus（圆环状模型），通过改变该torus的一些参数即可得到目标模型。创建圆环模型的核心代码为：
Var torus=createMesh(new THREE.TorusGeometry(radius,tube,radialSegements, tubularSegements, arc))；
其参数分别是：
radius //完整圆环的尺寸；
tube //圆环环道半径；
radialSegements、 tubularSegements //圆环表面光滑度值；
arc //控制是否绘制完整圆环。
4）圆环模型参数化。
除arc的参数化略有不同外，其它参数均可参照图5（b）中模型各参数编程。
关于arc的参数化，代码为：
gui.add(controls,'arc',0,Math.PI*2).onChange(controls.redraw); //设置圆环是否完整控制参数。
关于控制圆环完整度值arc, 参数“0-Math.PI*2”指的是该圆环完整度的取值范围。比如取值Math.PI*2，即得到一个完整的圆环，若取值Math.PI*0.5，则得到1/4的圆环。
将完整代码编写后便可得到如图6所示的链窝三维图，改变控制台参数即可改变相应的尺寸，从而可以对不同规格的链轮链窝进行设计。
上述几何体的几何中心位置是坐标原点，所以还需要对它进行移动，在Three.js中实现这个功能的代码为：
cylinder.position.(x，y，z)=（a，b，c）;
torus.position.(x，y，z)=（a，b，c）;
这段代码指的是该图形几何中心（x,y,z）的横、纵、竖向坐标值a,b,c可根据实际尺寸选取，以实现自由移动。
通过分析尺寸关系将2个模型移动到合适的位置后，即可再次与shape使用BSP库的subtract函数，从而形成链窝。
最终，在浏览器中成功建立链轮模型。
3.4 链轮模型参数化实例
客户端在浏览器的参数化界面直接输入相关参数即可得到不同参数下的链轮模型，如图7所示。客户端输入链轮规格、齿数时，节圆直径、外径以及立环槽直径等参数会被自动识别，进而点击“给出结果”即可得到相应的链轮模型。
3.5 网页数据库
在浏览器中可链接链轮网页数据库，如图8所示，客户端可以在网页中直接打开数据库选择预览各种不同规格、不同齿数的链轮，并可以导出相应格式的链轮文件。例如选中规格为“14 mm×50 mm”的七齿链轮，单击鼠标右键在新的网页中打开，即可在网页中直接打开链轮模型并可选择导出模型。
网页数据库建立技术是应用HTML、CSS、JavaScript语言，利用table表格属性建立数据库，数据库中链轮模型的载入是应用超链接，将所有链轮文件所在位置以超链接的形式加载到数据库中。如图8中七齿链轮的超链接<a href="链轮模型\14x50-7齿链轮.html">的路径设置为相对路径，客户端无需指定储存路径，便可直接打开进行浏览下载。针对客户端在浏览器中下载模型的问题，可在Three.js中通过使用Three.js的扩展库STLExporter.js或者OBJExporter.js将建立的模型转换为STL或OBJ格式。
4 模型打印结果及分析
4.1 链轮模型的3D打印
将浏览器所建链轮模型以STL格式文件导出，导入辅助设计软件Magics进行处理，处理完成后使用3D打印机（快速成型机）进行打印， 打印出的链轮如图9(a)所示。
4.2 链轮模型的对比
将工厂实际生产加工的实体链轮（如图9(b)所示）与3D打印链轮进行对比。从整体上看，两者的截齿形状、厚度、表面光滑度以及各弧线弧面没有差异，同时链窝的形状轨迹以及表面光滑度也无特殊差异。进行综合对比后，企业工作人员十分认可3D打印链轮的精度，不论是截齿部分还是链窝部分都满足了该企业对链轮实际加工的要求。
通过以上对比表明，在浏览器所建链轮模型与实际生产加工链轮没有明显差异，证明了链轮参数化设计方法的可行性和准确性。
5 结论
本文利用WebGL第三方库（Three.js）引擎进行建模，实现了在浏览器中对刮板输送机链轮的参数化建模等多项功能。该方案在链轮生产企业得到了良好的应用，工作人员无需进行复杂操作即可在浏览器中完成相应的操作，并且完全可以在企业区域网环境下进行，解决了企业高质量加工链轮的实际需求。
基于WebGL刮板输送机链轮参数化设计方法的开发方案具有以下优势：
1）在浏览器中实现了对链轮的参数化设计等多项功能，减小了客户端硬件配置要求过高的压力。
2）采用CAD建模软件Soildworks对链轮建模，总结出一种全新的链窝设计方法，该链窝设计方法更为高效、准确。
3)建立了浏览器内部链轮选型数据库，便于工作人员使用。
4)与其他三维建模软件对比，基于WebGL的开发方案具有跨平台优势且大大减小了客户端压力，提高了工作效率。
5)该设计方法是利用JavaScript语言进行开发的，开发难度相对较小。
6)基于WebGL链轮参数化设计方法为其他更复杂零部件的参数化设计提供了参考。
参考文献
- 1
张炜,任中全.基于Pro/E的刮板输送机链轮的参数化设计[J].煤矿机械,2011,32(7):220-221. doi:10.3969/j.issn.1003-0794.2011.07.105
ZHANG Wei, REN Zhong-quan. Parametric design of chain wheel of scraper conveyor based on Pro/E[J]. Coal Mine Machinery, 2011, 32(7): 220-221.
- 2
郭忠,张树民,张建军.矿用刮板输送机驱动链轮的参数化和可视化设计[J].煤矿机械,2006,27(9):31-33. doi:10.3969/j.issn.1003-0794.2006.09.013
GUO Zhong, ZHANG Shu-min, ZHANG Jian-jun. Parametric and visual design of driving sprocket of scraper conveyor for mine[J]. Coal Mine Machinery, 2006, 27(9): 31-33.
- 3
苏猛,魏永乐,刘明新.基于UG的刮板输送机链轮三维参数化建模[J].青岛理工大学学报,2005,26(1):70-73. doi:10.3969/j.issn.1673-4602.2005.01.017
SU Meng, WEI Yong-le, LIU Ming-xin. 3D parametric modeling of scraper conveyor sprocket based on UG[J]. Journal of Qingdao University of Technology, 2005, 26(1): 70-73.
- 4
应济,张万利,金昊炫.面向工程的专用产品参数化CAD系统的研究[J].工程设计学报,2003,10(5):260-265. doi:10.3785/j.issn.1006-754X.2003.05.005
YING Ji, ZHANG Wan-li, JIN Hao-xuan. Research on the parametric CAD system for engineering-oriented special products[J]. Chinese Journal of Engineering Design, 2003, 10(5): 260-265.
- 5
何丽,孙文磊,王宏伟.基于UG的Web三维零件库系统开发[J].机床与液压,2012,40(11):91-94. doi:10.3969/j.issn.1001-3881.2012.11.028
HE Li, SUN Wen-lei, WANG Hong-wei. Development of Web 3D parts library system based on UG[J]. Machine Tool and Hydraulic, 2012, 40(11): 91-94.
- 6
莫剑冬.基于Web的三维协同设计模型及其关键技术[J].计算机辅助工程,2013,22(3):53-56. doi:10.3969/j.issn.1006-0871.2013.03.011
MO Jian-dong. 3D collaborative design model based on Web and its key technologies[J]. Computer Aided Engineering, 2013, 22(3): 53-56.
- 7
龙成帅,温俊文.基于Web的三维建模和动画实时交互的关键技术[J].湛江师范学院学报,2004,25(6):79-82. doi:10.3969/j.issn.1006-4702.2004.06.018
LONG Cheng-shuai, WEN Jun-wen. Key technologies of Web-based 3D modeling and animation real-time interaction[J]. Journal of Zhanjiang Normal University, 2004, 25(6): 79-82.
- 8
何丽,孙文磊,王宏伟.UG二次开发技术在Web零件库系统开发中的应用研究[J].机床与液压,2011,39(20):9-11. doi:10.3969/j.issn.1001-3881.2011.20.003
HE Li, SUN Wen-lei, WANG Hong-wei. Application of UG secondary development technology in the development of Web parts library system[J]. Machine Tool and Hydraulic, 2011, 39(20): 9-11.
- 9
丁新民.基于Web环境的机械设计异地协同设计研究[J].科技创新与应用,2015(26):114. doi:10.3785/j.issn.1006-754X.2017.06.003
Ding Xin-min. Research on remote collaborative design of mechanical design based on Web environment [J]. Science and Technology Innovation and Application, 2015 (26): 114.
- 10
霍冬,郑伟华,盛步云.基于WebGL的机械产品三维展示技术研究[J].制造业自动化,2013(18):73-77. doi:10.3969/j.issn.1009-0134.2013.18.023
HUO Dong, ZHENG Wei-hua, SHENG Bu-yun. Research on 3D display technology of mechanical products based on WebGL[J]. Manufacturing Automation, 2013 (18): 73-77.
- 11
汪浩,田丰,张文俊.基于WebGL的交互平台设计与实现[J].电子测量技术,2015(8):119-122. doi:10.3969/j.issn.1002-7300.2015.08.028
WANG Hao, TIAN Feng, ZHANG Wen-jun. Design and implementation of interactive platform based on WebGL[J]. Electronic Measurement Technology, 2015(8): 119-122.
- 12
KOUICHI M,RODGER L.WebGL编程指南[M].谢光磊,译.北京:电子工业出版社，2014:13-16.
KOUICHI M, RODGER L. WebGL programming guide[M]. Translated by XIE Guang-lei. Beijing: Electronics Industry Press, 2014: 13-16.
- 13
JOS D. Three. js开发指南[M]. 李鹏程,译.北京: 机械工业出版社, 2015:3-7.
JOS D. Three.js development guide [M]. Translated by LI Peng-cheng. Beijing: Machinery Industry Press, 2015: 3-7.
- 1
摘要
链轮是刮板输送机传动部分的关键件零部件之一，其设计质量直接影响着刮板输送机的传动性能、生产效率和使用寿命。由于链轮加工工艺复杂，链轮的理论设计对实际加工起着决定性作用，因此进行链轮的参数化设计研究极其重要。链轮的参数化设计是采用WebGL（Web graphics library，网页图形库）第三方库（Three.js）以及JavaScript在浏览器中进行。以常见的规格为14 mm×50 mm的七齿链轮为例，在链窝设计中，采用SolidWorks对链轮建模且详细分析链窝结构，总结出一种全新的链窝设计方法。在Three.js中通过编写JavaScript参数控制函数，按照链轮设计标准，对链轮进行参数化设计。并应用Web前端开发，在局域网环境下，通过HTML、CSS、JavaScript语言建立网页链轮数据库，方便用户选型、下载以进行生产加工。通过3D打印技术打印所建链轮并与工厂实际生产加工的链轮进行对比分析，结果表明所建链轮模型与实际生产加工链轮没有明显差异，证明了链轮参数化设计方法的可行性和准确性。研究结果为其他更复杂零部件的参数化设计提供了参考。
Abstract
Sprocket is one of the key parts in the transmission part of the scraper conveyor, and its design quality has a direct impact on the transmission performance, production efficiency and working life of the scraper conveyor. Because of the complex processing of the sprocket, the theoretical design of the sprocket plays a decisive role in its actual processing. Therefore, it is very important to study the parametric design of the sprocket. The third party library of WebGL (Three.js) and JavaScript were adopted to develop the parametric design in browser. Taking the common seven tooth sprocket with the size of 14 mm×50 mm as an example, in the design of the chain nest, the sprocket was modeled by SolidWorks and the chain nest structure was analyzed in detail. A new design method of chain nest was summed up. Under the Three.js, the JavaScript parameter control function was compiled, and the parametric design of sprocket was carried out according to the sprocket design standard. And using the Web front-end development, in the LAN (local area network) environment, the Web sprocket database was set up by HTML, CSS and JavaScript language, which was convenient for the user to select and download for production and processing. Through the 3D printing technology, the sprocket wheel was printed and compared with the sprocket used in actual production, and the results showed that there was no significant difference between the model and the actual sprocket, which verified the feasibility and accuracy of the parametric design for sprocket. The results provide a reference for parametric design of other more complex components.
Keywords
sprocket; parametric design; browser; Web graphics library; Three.js
刮板输送机圆环链链轮是刮板输送机的关键部件之一，其加工工艺复杂。为保证在井下综采工作面复杂恶劣工况条件下刮板输送机能够正常运行，必须对其设计理论进行深入研究，因此进行刮板输送机链轮参数化设计非常有必要。
当前针对刮板输送机链轮参数化设计的研究中，学者们主要是利用CAD (computer aided design，计算机辅助设计)软件进行设计。文献[1,2,3]分别提出了基于Pro/E、UG等三维软件的链轮数字化设计方法，并指出利用CAD软件设计链轮不仅在设计上存在缺陷,且过程相对繁琐，导致无法进行进一步的工业设计。文献[4]指出基于面向工程的专用产品参数化CAD系统的研究是基于CAD软件实现的。利用CAD软件的二次开发功能进行数字化设计，虽然在一定程度上提高了设计效率，但其软件结构庞大，对于电脑的配置要求较高，从而在设计过程中常出现电脑卡顿、反应迟缓等问题。
基于Web的CAD软件参数化建模的目的是在网络环境下能通过客户端进行相关操作，实现交互功能。文献[5,6,7,8,9]指出对于不同的CAD软件与Web服务器之间的响应需安装相对应的程序访问接口，会影响CAD软件与Web服务器之间的响应速度。且为了运行三维图形程序，用户不仅需要安装程序本身，通常还需要安装程序所依赖的库，这会直接影响机械三维模型的加载速度，极大削弱用户体验。文献[10,11]指出机械三维模型在Web端所呈现的画面需用不同的插件去改善其性能，对于不同的操作系统也需调用不同的程序接口，这意味着对于不同操作系统的客户端来说，在Web环境下与机械三维图形程序进行各项交互功能的程序不能跨平台使用。这些不足在很大程度上限制了Web交互式机械三维图形程序的适用范围。
本文为了满足某刮板输送机制造企业的实际需求，在局域网环境下，利用WebGL（Web graphics library，网页图形库）第三方库（Three.js）引擎，实现在浏览器中对链轮的参数化建模，并提出一种对其复杂部位——链窝进行设计的新方法。基于该方法的设计方案不仅实现了链轮的参数化设计，且客户端无需安装任何插件即可与Web服务器交互，极大减小了电脑负担，同时可运行于不同操作系统。
