（网页三维CAD）在线3D CAD中创建一个三维管道模型的方法

前言

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

更详细教程关注公Z号：梦想云图网页CAD。

安装

在此之前，需要先安装mxcad包，如下图：

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

代码编写及效果展示

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编写绘制管道的函数，代码如下：

functiondrawRoundRectPipe() {
// 管道用到的颜色材质
constgrayColor =newMx3dGeColor(MdGe.MxNameOfColor.Color_NOC_GRAY25);
constmat =newMx3dGeMaterial(MdGe.MxNameOfMaterial.Material_NOM_Steel);
// 管道的路径，由直线和圆弧构成，必须C1连续。
letwire:Mx3dShapeWire;
{
constpt1 =newMx3dGePoint(0,0,0);
constpt2 =newMx3dGePoint(0,0,85);
// 直线段
constedge1 =newMx3dShapeEdge(pt1,pt2);
constfilletCsysr1 =newMx3dGeCSYSR(newMx3dGePoint(15,0,85),newMx3dGeDir(0,-1,0),newMx3dGeDir(0,0,1));
constfillet1 =newMx3dGeomCircle(filletCsysr1,15);
// 圆弧
constedge2 =fillet1.Edge(0,Math.PI/2);
constpt3 =newMx3dGePoint(15,0,100);
constpt4 =newMx3dGePoint(85,0,100);
// 直线段
constedge3 =newMx3dShapeEdge(pt3,pt4);
constfilletCsysr2 =newMx3dGeCSYSR(newMx3dGePoint(85,15,100),newMx3dGeDir(0,0,1),newMx3dGeDir(0,-1,0));
constfillet2 =newMx3dGeomCircle(filletCsysr2,15);
// 圆弧
constedge4 =fillet2.Edge(0,Math.PI/2);
constpt5 =newMx3dGePoint(100,15,100);
constpt6 =newMx3dGePoint(100,85,100);
// 直线段
constedge5 =newMx3dShapeEdge(pt5,pt6);
constfilletCsysr3 =newMx3dGeCSYSR(newMx3dGePoint(100,85,115),newMx3dGeDir(1,0,0),newMx3dGeDir(0,0,-1));
constfillet3 =newMx3dGeomCircle(filletCsysr3,15);
// 圆弧
constedge6 =fillet3.Edge(0,Math.PI/2);
constpt7 =newMx3dGePoint(100,100,115);
constpt8 =newMx3dGePoint(100,100,200);
// 直线段
constedge7 =newMx3dShapeEdge(pt7,pt8);
constshape =Mx3dWireTool.ConnectEdgesToWires([edge1,edge2,edge3,edge4,edge5,edge6,edge7],1e-6,false)[0];
// 得到最后连接组合而成的管道路径
wire =Mx3dShapeDownCast.Wire(shape);
}
// 管道横截面形状，由一个内圆角方形和外圆角方形之间构成的区域
letfaceRoundRect:Mx3dShapeFace;
{
constpts:Mx3dGePoint[] =[];
constpt1 =newMx3dGePoint(0,0,0);
constpt2 =newMx3dGePoint(0,10,0);
constpt3 =newMx3dGePoint(10,10,0);
constpt4 =newMx3dGePoint(10,0,0);
pts.push(pt2);
pts.push(pt3);
pts.push(pt4);
pts.push(pt1);
// 四条直线段构成正方形
constedges:Mx3dShapeEdge[] =[];
constedge1 =newMx3dShapeEdge(pt1,pt2);
constedge2 =newMx3dShapeEdge(pt2,pt3);
constedge3 =newMx3dShapeEdge(pt3,pt4);
constedge4 =newMx3dShapeEdge(pt4,pt1);
edges.push(edge1);
edges.push(edge2);
edges.push(edge3);
edges.push(edge4);
// 四条直线段，循环进行二维倒圆角，圆角放入arcs数组。
constarcs:Mx3dShapeEdge[] =[];
for(leti =0;i {
// 矩形所在平面，默认构造就是在XOY平面（右手系）
constpln =newMx3dGePlane();
// 二维倒圆角算法对象
constf2d =newMx3dAlgoFillet2d();
if(i // 初始化时，传入两条要进行倒圆角的直线段，以及他们所在的平面（必须是在同一平面）
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]));
}
}
// 连接所有的直线段和圆弧
constwireOuterShape =Mx3dWireTool.ConnectEdgesToWires([...edges,...arcs],1e-6,false)[0];
// 外圈
constwireOuter =Mx3dShapeDownCast.Wire(wireOuterShape);
// 内圈
constwireInner =wireOuter.Scaled(newMx3dGePoint(5,5,0),0.8);
// 内圈方向要进行个反向
wireInner.reverse();
// 生成内外圈之间构成的环面
constfaceMaker =newMx3dMkFace(wireOuter,true);
faceMaker.Add(wireInner);
faceRoundRect =faceMaker.Face();
// 移动到中心位置和管道路径起点一致
faceRoundRect.TranslateByVec(-5,-5,0);
}
// 通过路径和截面生成管道形状
constpipe =newMx3dMkPipe(wire,faceRoundRect);
constpipeShape =pipe.Shape();
// 给pipeShape设置材质颜色，放入模型文档并显示
mxcad3d.removeAll();
constdoc =mxcad3d.getDocument();
constpipeShapeLabel =doc.addShapeLabel();
pipeShapeLabel.setShape(pipeShape);
pipeShapeLabel.setMaterial(mat);
pipeShapeLabel.setColor(grayColor);
mxcad3d.update();
}

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

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