（基于HTML网页三维CAD）网页CAD中创建一个安装体
引子
在网页CAD中有些疏浚的零件不错只建一个模子实例，其余用到的处所均为实例的援用，然后将援用组合起来造成安装体。mxcad3d提供了丰富的三维建模功能和方便的API，接下来聊一下奈何诓骗mxcad3d来创建小车安装体模子。
快速初学
当先咱们需要学习mxcad的基本使用表情，不错通过官方的初学教程来搭建一个最基本的名堂模板。
开导环境准备（对前端开导不熟谙的一定要看）安装Node.js和VS Code,然后创建最基本的mxcad开导名堂、API文档使用讲解。
本次教程终末完成的完好测试名堂压缩包，压缩包下载解压后需要在名堂目次下灵通cmd呐喊行，然后在呐喊行中现实npm install来安装依赖，然后再按照本教程中的时势来运行名堂检察效劳。
编写创建安装体小车的代码
1.按照上头引子中第2条中的时势，阐述官方快速初学教程来创建一个名为Test3dAssemblyCar的名堂，如下图：
2.编写绘画安装体小车的代码
在index.html中插入一个按钮"绘画安装体小车"， index.html的完好代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vite use mxcad</title> </head> <body> <div style="height: 800px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div> <button>绘画安装体小车</button> <script chk=1&type="module" src="./src/index.ts"></script> </body> </html>
在src/index.ts中编写绘画安装体小车的函数，src/index.ts的完好代码如下：
import { MdGe, Mx3dGeAxis, Mx3dGeColor, Mx3dGeCSYSR, Mx3dGeDir, Mx3dGeLocation, Mx3dGePoint, Mx3dGeTrsf, Mx3dGeVec, Mx3dMkCylinder, Mx3dMkFace, Mx3dMkPolygon, Mx3dMkPrism, MxCAD3DObject } from "mxcad"// 创建mxcad3d对象\const mxcad3d = new MxCAD3DObject()// 开动化mxcad3d对象\mxcad3d.create({\ // canvas元素的css选拔器字符串（示例中是id选拔器），或canvas元素对象\ canvas: "#myCanvas",\ // 得到加载wasm干系文献(wasm/js/worker.js)旅途位置\ locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/3d/${fileName}`, import.meta.url).href,\})// 开动化完成\mxcad3d.on("init", ()=>{\ console.log("开动化完成");\});\function drawAssemblyCar() {\ // 轮子表情\ const pt = new Mx3dGePoint(0, 0, 0); // 中心点\ const dir = new Mx3dGeDir(0, 0, 1); // 成见\ const csysr = new Mx3dGeCSYSR(pt, dir); // 阐述点和成见创建一个右手坐标系\ const wheel = new Mx3dMkCylinder(csysr, 20, 10); // 轮子(宽扁的圆柱体)\ let wheelShape = wheel.Shape(); // 得到轮子拓扑表情\ // 轴表情\ const axle = new Mx3dMkCylinder(csysr, 5, 100); // 轴(细长的圆柱体)\ const axleShape = axle.Shape(); // 得到轴拓扑表情\ wheelShape = wheelShape.cut(axleShape); // 切割掉轮子的轴孔\ // 车体表情\ const bodyPts:Mx3dGePoint\[] = \[]\ bodyPts.push(new Mx3dGePoint(0, 0, 0));\ bodyPts.push(new Mx3dGePoint(0, 50, 0));\ bodyPts.push(new Mx3dGePoint(160, 50, 0));\ bodyPts.push(new Mx3dGePoint(160, 0, 0));\ const bodyPoly = new Mx3dMkPolygon(); // 创建多段线(车体的截面详细)\ bodyPts.forEach((pt) => {\ bodyPoly.Add(pt);\ });\ bodyPoly.Close(); // 闭合多段线\ const bodyWire = bodyPoly.Wire(); // 得到多段线(车体的截面详细)的拓扑Wire\ const bodyMkFace = new Mx3dMkFace(bodyWire); // 用Wire生成面\ const bodyFace = bodyMkFace.Face(); // 得到面\ const bodyPrism = new Mx3dMkPrism(bodyFace, new Mx3dGeVec(0, 0, 100)); // 用面生成车体实体\ let bodyShape = bodyPrism.Shape(); // 得到车体实体表情\ bodyShape.TranslateBy2Points(new Mx3dGePoint(30, 0, 0), new Mx3dGePoint(0, 0, 0)); // 出动到符合位置，方便安装\ const wheelForCut = new Mx3dMkCylinder(csysr, 25, 15); // 车体镶嵌车轮的处所，用车体切掉，用于放入轮子\ // 以下是切出四个放轮子的空间\ const wheelForCutShape = wheelForCut.Shape();\ bodyShape = bodyShape.cut(wheelForCutShape);\ bodyShape = bodyShape.cut(wheelForCutShape.TranslatedByVec(new Mx3dGeVec(0, 0, 85)));\ bodyShape = bodyShape.cut(wheelForCutShape.TranslatedByVec(new Mx3dGeVec(100, 0, 0)));\ bodyShape = bodyShape.cut(wheelForCutShape.TranslatedByVec(new Mx3dGeVec(100, 0, 85)));\ const axleForCut = new Mx3dMkCylinder(csysr, 6, 100); // 车体镶嵌轴的处所，用车体切掉，用于放入轴\ // 以下是切出两个放轴的空间\ const axleForCutShape = axleForCut.Shape();\ bodyShape = bodyShape.cut(axleForCutShape);\ bodyShape = bodyShape.cut(axleForCutShape.TranslatedByVec(new Mx3dGeVec(100, 0, 0)));\ // 得到文档\ const doc = mxcad3d.getDocument();\ // 车子安装体标签\ const carLabel = doc.addShapeLabel();\ // 轮子实例标签\ const wheelLabel = doc.addShapeLabel();\ // 车轴实例标签\ const axleLabel = doc.addShapeLabel();\ // 轮轴安装体实例标签\ const wheelAxleLabel = doc.addShapeLabel();\ // 车壳实例标签\ const bodyLabel = doc.addShapeLabel();\ // 轮子、轴、车体表情齐添加到模子文档的标签中(同期为不同的表情建造不同的颜料)\ wheelLabel.setShape(wheelShape);\ wheelLabel.setColor(new Mx3dGeColor(MdGe.MxNameOfColor.Color\_NOC\_BLACK));\ axleLabel.setShape(axleShape);\ axleLabel.setColor(new Mx3dGeColor(MdGe.MxNameOfColor.Color\_NOC\_RED));\ bodyLabel.setShape(bodyShape);\ bodyLabel.setColor(new Mx3dGeColor(MdGe.MxNameOfColor.Color\_NOC\_BLUE2));\ // 轮轴安装体(轮轴安装体需要两个轮子、一个轴)\ wheelAxleLabel.addComponent(wheelLabel, new Mx3dGeLocation()); // 添加第一个轮子，莫得位置(原位置，轮子模子创建的位置)\ const wheel\_2\_trsf = new Mx3dGeTrsf();\ wheel\_2\_trsf.SetTranslationPart(new Mx3dGeVec(0, 0, 90));\ wheelAxleLabel.addComponent(wheelLabel, new Mx3dGeLocation(wheel\_2\_trsf)); // 添加第二个轮子，有位置(向Z轴正成见出动90之后的位置)\ wheelAxleLabel.addComponent(axleLabel, new Mx3dGeLocation()); // 添加轴，莫得位置(原位置，轴模子创建的位置)\ // 车子安装体(车子安装体需要两个轮轴安装体、一个车体)\ const wheelAxle\_1\_trsf = new Mx3dGeTrsf();\ wheelAxle\_1\_trsf.SetRotation(new Mx3dGeAxis(new Mx3dGePoint(0, 0, 0), new Mx3dGeDir(1, 0, 0)), Math.PI / 2);\ carLabel.addComponent(wheelAxleLabel, new Mx3dGeLocation(wheelAxle\_1\_trsf)); // 添加第一个轮轴安装体，有位置(绕X轴旋转90度之后的位置)\ let wheelAxle\_2\_trsf = new Mx3dGeTrsf();\ wheelAxle\_2\_trsf.SetTranslationPart(new Mx3dGeVec(100, 0, 0));\ wheelAxle\_2\_trsf = wheelAxle\_2\_trsf.Multiplied(wheelAxle\_1\_trsf); // 矩阵相乘，得到第二个轮轴安装体的位置，相乘后的矩阵代表先绕X轴旋转90度，然后再向X轴正方形平移100\ carLabel.addComponent(wheelAxleLabel, new Mx3dGeLocation(wheelAxle\_2\_trsf)); // 添加第二个轮轴安装体，有位置(绕X轴旋转90度，然后再向X轴正方形平移100之后的位置)\ carLabel.addComponent(bodyLabel, new Mx3dGeLocation(wheelAxle\_1\_trsf)); // 添加车体，有位置(绕X轴旋转90度之后的位置)\ // 更新新图露馅模子，会将文档中的模子露馅到刻下视图中\ mxcad3d.update();\}// 给button添加点击事件，点击后调用drawAssemblyCar函数// 立即现实函数\(function addEventToButton(){\ const btn = document.querySelector("button");\ if (btn) {\ btn.addEventListener("click", () => {\ drawAssemblyCar();\ });\ }\})()
按照官方快速初学教程，新建结尾，运行npx vite呐喊来运行名堂，不雅察效劳如下图：
