插播广告（长期有效）MONO哥武汉需要招聘JavaScript工程师。几个要求：对于前端技术（JavasScript、HTML、CSS），对于可视化技术（Canvas、WebGL）基础不好可以培养浓厚的兴趣，基础好可以谋大事物。如果您有兴趣，给我发邮件：hr@servasoft.com--------------------------------------------------------------文本分割线--------------------------------------------------------------今天来聊聊画画.先说一下图形引擎的种类。目前市场上的图形引擎大致可以分为两类。基于HTML技术的类，如TWaver2D/3D引擎。HTML5是公认的网络标准，是业界最流行和最主流的技术。它可以直接在浏览器中创建2D和3D场景，无需安装任何插件。它已经应用于几乎所有行业的Web应用程序。目前所有主流浏览器都很好地支持HTML5技术，包括手机、平板等移动浏览器的支持。另一个是Unity的Unity3D引擎。Unity3D需要在浏览器中安装专门的播放器插件才能运行，这有点类似于行将就木的Flash技术。另外，Unity3D主要支持桌面浏览器，不支持手机浏览器插件。由于安装插件不便，且存在一定的安全隐患，Unity3D在企业应用中并不常见，但在游戏行业却能大显身手。下面分享一下如何使用TWaver3D引擎进行绘图。1、WebGL原生线WebGL支持绘制点、线、三角形；画线的方法比较简单，给定一个顶点设置画法即可；假设给定的顶点信息是：varvertices=newFloat32Array([0.0,0.5,-0.5,-0.5,0.25,-0.5]);调用gl.drawArrays(gl.LINE_STRIP,0,3);效果如下：Chrome:Safari:还有兼容性问题。在Windows上，绘制线条时无法指定线宽。OpenGL本身有glLineWidth方法，WebGL中也有这个方法。不过虽然在windows上调用不会失败，但是不管是在chrome还是firefox上测试都不会生效。但是在linux上是有效的，应该是操作系统的限制。这个问题之前有人提出过，有兴趣的可以看看https://bugs.chromium.org/p/c...。也许这个问题会在未来的WebGL版本中得到修复。测试站点http://alteredqualia.com/tmp/…。将lineWidth设置为10后，Chrome效果不变，Safari的线条变粗了。测试网站测试：Chrome不正常，Safari正常，FireFox正常：是Chrome长期存在的bug：https://bugs.chromium.org/p/c...可以参考文章WebGL大神飚叔：WebGL画线bug2。mono.Line类构造函数：实线：varline=newmono.Line({vertices:[newmono.Vec3(-100,0,0),newmono.Vec3(100,100,0),],type:'mono.LinePieces',styles:{'m.color':'red',},});box.add(line);虚线的原始参数是通过segments计算更多的顶点信息；其实可以通过配置line的style属性来计算顶点信息，比如line.pattern=[10,2];封装了mono.Line.createDottedLine方法，用于根据模式创建虚线；varline=newmono.Line({type:TGL.LinePieces,styles:{'m.color':'green','m.type':'phong','m.ambient':'red',}});line=mono.Line.createDottedLine(line,[newmono.Vec3(-200,100,-100),newmono.Vec3(160,100,0),newmono.Vec3(300,-100,100),newmono.Vec3(-300,-100,200),newmono.Vec3(-200,100,0),newmono.Vec3(-200,100,-100),],[6,12]);改变图案后的效果：实线变长，虚线变短；创建一个矩形：mono.Line.createRectangle=function(width,height,segments){//width:width,height:height,segments:片段数varline=mono.Line.createRectangle(200,200,10);line.setType(TGL.LineStrip);line.setPositionY(-30);line.setPositionX(20);line.setStyle('m.color','red');box.add(line);创建椤圆，并分段设置颜色varline=mono.Line.createEllipse(120,80,100,Math.PI*2,0,true);line.setPositionY(0);line.setPositionX(0);line.setMaterialStyle('vertexColors',true);line.setMaterialStyle('linewidth',10);line.setMaterialStyle('linejoin','miter');line.setType(TGL.LinePieces);var顶点=line.getVertices();varcolors=[],color;for(vari=0;i0&&vertex.y>0){color=newmono.Color('red');}elseif(vertex.x>0&&vertex.y<0){color=newmono.Color('green');}elseif(顶点.x<0&&vertex.y<0){color=newmono.Color('orange');}else{color=newmono.Color('yellow');}colors.push(color);}行。setColors(colors);box.add(line);//创建Helix旋转状态线条//mono.Line.createHelix=function(line,startRadius,endRadius,height,turns,segments)//startRadius:起始半径,endRadius:结束半径,height:高度,turns:圈数,segments:段数varline=mono.Line.createHelix(-100,250,200,10,400);line.setPositionY(30);line.setPositionX(20);line.setMaterialStyle('linewidth',10);line.setStyle('m.color','red');box.add(line);//创建Ellipse椭圆线//mono.Line.createEllipse(xRadius,yRadius,segments,aStartAngle,aEndAngle,aClockwise)//xRadius,yRadius：椭圆的半径，segments：线段数，aStartAngle：起始角度，aEndAngle：结束角度,aClockwise:是否逆时针varline=mono.Line.createEllipse(120,80,100,0,Math.PI/2,true);//line.setType(TGL.LinePieces);line.setPositionY(30);line.setPositionX(20);line.setStyle('m.color','red');line.setMaterialStyle('linewidth',10);box.add(线);3。mono.LineXclass如前所述，Chrome不支持设置线宽，只能自己模拟；所以创建了mono.LineX；如图，蓝色的是LineX效果可用于绘制管道等效果；varlineX=newmono.LineX([{x:-180,y:100,z:-100},{x:120,y:100,z:0},{x:280,y:-100,z:100},{x:-280,y:-100,z:200},{x:-180,y:100,z:0},{x:-180,y:100,z:-100},],['红色','红色','红色','红色'],10);lineX.setStyle('m.color','blue');4.单声道。PathNode,mono.PathLine,mono.PathCube路径体(mono.PathNode)这是一个复杂的形体，由两个任意形状控制：截面形状和前进方向。最终的形状就是将切片的形状沿着正向移动形成的物体。例如，沿多边形移动的圆形切片创建复杂的管道对象。这个形状还可以控制两端是否闭合，闭合的形状和尺寸，是否横向闭合，闭合角度，闭合样式等等。通过控制这些参数，可以创建管道、弯头、香肠体、切割管道等。具体可以参考TWaver官方文档，本文不再赘述。http://doc.servasoft.com/twav...5.mono.NurbsCurve权威书籍：《非均匀有理B样条(第2版)》Non-uniformrationalB-splines，通常简称为NURBS（Non-UniformRationalB-Splines），有实际上已经成为用计算机处理聚合信息时形状表示、设计和数据交换的行业标准。许多国内外标准，如IGES、STEP和PHIGS，都将NURBS视为装配设计的有力工具。NURBS的巨大成功主要归功于以下事实[1]：NURBS为解析曲面（如圆锥截面和二次曲面）和自由曲面（如汽车车身和shiphullshape);使用NURBS进行设计非常直观，几乎每个工具和算法都有通俗易懂的几何解释；NURBS算法快速且数值稳定；和透视投影）是不变的；NURBS是非有理B样条、有理与非有理贝塞尔曲线曲面的推广；对于大多数人来说，B样条、有理B样条和NURBS都有些神秘，有人称NURBS为一种没人能理解的有理B样条曲线（NoBodyUnderstandRelationB-Splines）；目前学习NURBS的主要目的是呈现三维数据场的可视化，可以参考书籍《三维数据场可视化》[2]；NURBS曲线看似比较神秘，其实也很好理解；模型的曲线一定要逼真，曲线越逼真，模型就越逼真。一般的直线和曲线很难达到这样的效果，所以引入了NURBS曲线。/***{[TGL.Line]}line*{[Arrayofvector(3|4)]]}ctrlPoints曲线的控制点*{[Number]}度曲线的最高索引*{[Number]}countcurve每段要插入的点数*{[Object]}ctrlCond线控制条件*/TGL.Line.createNurbs=function(line,ctrlPoints,degree,count,ctrlCond){}随机单色波浪线：varpoints=[0,-200,500,0,1000,-400,-10,500,-1000,0,0,100,-100,0,0,0,0,0];varctrlPoints=[];for(vari=0,j=10;i
