在线三维CAD（网页浏览编辑3D CAD）中创建一个三维管道模型的教程

前言

在网页CAD中进行三维建模是一项有趣的任务。本文将介绍如何利用mxcad3d来创建三维管道模型。该工具提供了一系列三维建模功能的API，使得建立复杂的管道结构变得简单直观，公众号：梦想云图网页CAD。

安装

在此之前，需要先安装mxcad包，安装的步骤可以查看梦想CAD官方的入门教程：https://help.mxdraw.com/?pid=32，如下图：

本次教程我们新建一个Test3dPipe目录，然后在此目录中按照官方入门教程进行初始化项目，最后使用VS Code打开这个项目，如下图：


本次教程的完整项目代码可以在这里下载：https://gitee.com/mxcadx/mxcad_docs/tree/master/examples3D/Te...

代码编写及效果展示

1.添加绘制按钮

在index.html文件中添加一个按钮，用于点击后绘制管道，如下图：

2.编写绘制管道的函数

2.1本教程演示如何创建一个圆角方管，以下是在index.ts绘制圆角方管的函数代码，先导入需要用到的模块，代码如下： 

// 从mxcad中导入需要用到的模块
import { MxCAD3DObject, MdGe, Mx3dAlgoFillet2d, Mx3dGeColor, Mx3dGeCSYSR, Mx3dGeDir, Mx3dGeMaterial, Mx3dGeomCircle,
Mx3dGePlane, Mx3dGePoint, Mx3dMkFace, Mx3dMkPipe, Mx3dShapeDownCast, Mx3dShapeEdge,
Mx3dShapeFace, Mx3dShapeWire, Mx3dWireTool } from "mxcad"

2.2编写绘制管道的函数，代码如下： 

  function drawRoundRectPipe() {  
     // 管道用到的颜色材质  
    const grayColor = new Mx3dGeColor(MdGe.MxNameOfColor.Color_NOC_GRAY25);  
    const mat = new Mx3dGeMaterial(MdGe.MxNameOfMaterial.Material_NOM_Steel);  
     // 管道的路径，由直线和圆弧构成，必须C1连续。  
    let wire: Mx3dShapeWire;  
    {  
      const pt1 = new Mx3dGePoint(0, 0, 0);  
      const pt2 = new Mx3dGePoint(0, 0, 85);  
       // 直线段  
      const edge1 = new Mx3dShapeEdge(pt1, pt2);         
      const filletCsysr1 = new Mx3dGeCSYSR(new Mx3dGePoint(15, 0, 85), new Mx3dGeDir(0, -1, 0), new Mx3dGeDir(0, 0, 1));  
      const fillet1 = new Mx3dGeomCircle(filletCsysr1, 15);  
       // 圆弧  
      const edge2 = fillet1.Edge(0, Math.PI / 2);  
      const pt3 = new Mx3dGePoint(15, 0, 100);  
      const pt4 = new Mx3dGePoint(85, 0, 100);  
       // 直线段  
      const edge3 = new Mx3dShapeEdge(pt3, pt4);  
      const filletCsysr2 = new Mx3dGeCSYSR(new Mx3dGePoint(85, 15, 100), new Mx3dGeDir(0, 0, 1), new Mx3dGeDir(0, -1, 0));  
      const fillet2 = new Mx3dGeomCircle(filletCsysr2, 15);  
       // 圆弧  
      const edge4 = fillet2.Edge(0, Math.PI / 2);  
      const pt5 = new Mx3dGePoint(100, 15, 100);  
      const pt6 = new Mx3dGePoint(100, 85, 100);  
       // 直线段  
      const edge5 = new Mx3dShapeEdge(pt5, pt6);  
      const filletCsysr3 = new Mx3dGeCSYSR(new Mx3dGePoint(100, 85, 115), new Mx3dGeDir(1, 0, 0), new Mx3dGeDir(0, 0, -1));  
      const fillet3 = new Mx3dGeomCircle(filletCsysr3, 15);  
       // 圆弧  
      const edge6 = fillet3.Edge(0, Math.PI / 2);  
      const pt7 = new Mx3dGePoint(100, 100, 115);  
      const pt8 = new Mx3dGePoint(100, 100, 200);  
       // 直线段  
      const edge7 = new Mx3dShapeEdge(pt7, pt8);  
      const shape = Mx3dWireTool.ConnectEdgesToWires([edge1, edge2, edge3, edge4, edge5, edge6, edge7], 1e-6, false)[0];  
       // 得到最后连接组合而成的管道路径  
      wire = Mx3dShapeDownCast.Wire(shape);  
    }  
     // 管道横截面形状，由一个内圆角方形和外圆角方形之间构成的区域  
    let faceRoundRect:Mx3dShapeFace;  
    {  
      const pts: Mx3dGePoint[] = [];  
      const pt1 = new Mx3dGePoint(0, 0, 0);  
      const pt2 = new Mx3dGePoint(0, 10, 0);  
      const pt3 = new Mx3dGePoint(10, 10, 0);  
      const pt4 = new Mx3dGePoint(10, 0, 0);     
      pts.push(pt2);  
      pts.push(pt3);  
      pts.push(pt4);  
      pts.push(pt1);  
       // 四条直线段构成正方形  
      const edges: Mx3dShapeEdge[] = [];  
      const edge1 = new Mx3dShapeEdge(pt1, pt2);  
      const edge2 = new Mx3dShapeEdge(pt2, pt3);  
      const edge3 = new Mx3dShapeEdge(pt3, pt4);  
      const edge4 = new Mx3dShapeEdge(pt4, pt1);  
      edges.push(edge1);  
      edges.push(edge2);  
      edges.push(edge3);  
      edges.push(edge4);     
       // 四条直线段，循环进行二维倒圆角，圆角放入arcs数组。  
      const arcs: Mx3dShapeEdge[] = [];  
      for(let i = 0; i < edges.length; i++)  
      {  
         // 矩形所在平面，默认构造就是在XOY平面（右手系）  
        const pln = new Mx3dGePlane();  
         // 二维倒圆角算法对象  
        const f2d = new Mx3dAlgoFillet2d();  
        if (i < edges.length - 1) {  
           // 初始化时，传入两条要进行倒圆角的直线段，以及他们所在的平面（必须是在同一平面）  
          f2d.Init(edges[i], edges[i + 1], pln);  
           // 执行倒圆角算法，圆角半径为2  
          f2d.Perform(2);  
           // Result方法返回倒圆角算法在所在点执行倒圆角后的圆弧段，Result方法传入第一个参数是要执行倒圆角的点，因为我们当前是两个直线段倒圆角，所以就只有在这两个直线段的交点或延长后的交点倒圆角，只有这个一个交点，所以这里就传入这个交点，如果不是两直线段倒圆角，比如一个直线段和一个圆弧，他们就可能有两个交点，这时就要指定要返回哪个交点处倒圆角的结果了。第二个参数和第三个参数分别传入参与倒圆角的两条直线段，Result方法会将这两个参数修改为倒圆角之后改变过后的两条直线段。  
          arcs.push(f2d.Result(pts[i], edges[i], edges[i + 1]));  
        }  
        else{  
          f2d.Init(edges[i], edges[0], pln);  
          f2d.Perform(2);  
          arcs.push(f2d.Result(pts[i], edges[i], edges[0]));  
        }  
      }  
       // 连接所有的直线段和圆弧  
      const wireOuterShape = Mx3dWireTool.ConnectEdgesToWires([...edges, ...arcs], 1e-6, false)[0];  
       // 外圈  
      const wireOuter = Mx3dShapeDownCast.Wire(wireOuterShape);  
       // 内圈  
      const wireInner = wireOuter.Scaled(new Mx3dGePoint(5, 5, 0), 0.8);  
       // 内圈方向要进行个反向  
      wireInner.reverse();  
       // 生成内外圈之间构成的环面  
      const faceMaker = new Mx3dMkFace(wireOuter, true);  
      faceMaker.Add(wireInner);  
      faceRoundRect = faceMaker.Face();  
       // 移动到中心位置和管道路径起点一致  
      faceRoundRect.TranslateByVec(-5, -5, 0);  
    }  
   // 通过路径和截面生成管道形状  
    const pipe = new Mx3dMkPipe(wire, faceRoundRect);  
    const pipeShape = pipe.Shape();  
    
   // 给pipeShape设置材质颜色，放入模型文档并显示  
    mxcad3d.removeAll();  
    const doc = mxcad3d.getDocument();  
    const pipeShapeLabel = doc.addShapeLabel();  
    pipeShapeLabel.setShape(pipeShape);  
    pipeShapeLabel.setMaterial(mat);  
    pipeShapeLabel.setColor(grayColor);  
    mxcad3d.update();  
}

2.3然后给绘制按钮添加点击事件，触发绘制管道函数的调用，代码如下： 

// 给button添加点击事件，点击后调用drawRoundRectPipe函数，进行圆角方管的绘制
// 立即执行函数 
(function addEventToButton(){  
  const btn = document.querySelector("button");  
  if (btn) {  
    btn.addEventListener("click", () =>  {  
      drawRoundRectPipe();  
    });  
  }  
})()

点击绘制管道按钮,效果如下图：