网页三维CAD中加载和保存STEP模子
发布日期：2024-12-07 14:27 点击次数：168媒介
1. 在网页CAD中进行三维建模的本事常常需要导入和导出STEP模样的三维模子文献,本文将先容奈何使用`mxcad3d`来导入导出STEP三维模子。
2. 领先咱们需要学习`mxcad3d`的基本使用才气，不错通过官方的初学教程来搭建一个最基本的名堂模板。
代码编写和遵循展示
1. 笔据官方快速初学教程来创建一个名为`Test3dImportAndExport`的名堂，如下图：
2. 接口诠释
MxCAD3DObject视图文档对象：创建视图文档对象并通过canvas进走时行化，该对象包含一个用于露馅的canvas视图，以及一个保存模子信息的文档。Mx3dDbDocument 文档对象：视图文档对象中包含一个此类型的文档对象，文档对象不错在里面创建标签对象用于保存模子的模样以及豪情材质贴图等信息。 Mx3dDbLabel标签对象：由文档对象创建，通过标签对象的多样才气不错保存模子的模样以及多样信息。
加载模子的API，代码如下：
/** * 读取模子文献并领略为文档。 * @param theFile - 要读取的文献对象。 * @param theFormat - 模子文献模样。 * @returns 复返一个 Promise，领略戒指为布尔值，默示奏效或失败。 */ read(theFile: File, theFormat: MdGe.MxFormat): Promise<boolean>;
read才气是Mx3dDbDocument对象的一个才气，此才气用于读取指定模样的模子文献，况且会在Mx3dDbDocument对象中创建标签用于保存模子信息；该才气禁受一个File类型的对象，以及MdGe.MxFormat摆设类型指定的模子模样，以下是MdGe.MxFormat摆设所界说的悉数摆设值：
enum MxFormat { Format_Unknown = 0, Format_Image = 1, Format_3DS = 2, Format_3MF = 3, Format_AMF = 4, Format_COLLADA = 5, Format_DXF = 6, Format_FBX = 7, Format_GLTF = 8, Format_IGES = 9, Format_OBJ = 10, Format_OCCBREP = 11, Format_OFF = 12, Format_PLY = 13, Format_STEP = 14, Format_STL = 15, Format_VRML = 16, Format_X3D = 17, Format_Blender = 18 }
保存模子的API:
/** * 写入文档到指定旅途。 * @param theFilePath - 文献旅途。 * @param theFormat - 文献模样。 * @returns 复返布尔值，默示是否奏效写入。 */ write(theFilePath: string, theFormat: MdGe.MxFormat): boolean;
write才气是Mx3dDbDocument对象的一个才气，此才气用于保存为指定模样的模子文献；该才气禁受一个File类型的对象，以及MdGe.MxFormat摆设类型指定的模子模样。
3. 编写导入和保存STEP模子文献的代码
在index.html中插入两个按钮"绽放STEP模子"，"保存为STEP文献" ；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 id="open">绽放STEP模子</button> <button id="save">保存为STEP文献</button> <script chk=1&type="module" src="./src/index.ts"></script> </body> </html>
在src/index.ts中编写两个函数loadSTEP()，saveSTEP()辞别用于绽放STEP模子、保存为STEP文献，src/index.ts的竣工代码如下所示:
import { MdGe, Mx3dGeColor, Mx3dGeCSYSR, Mx3dGeDir, Mx3dGePoint, Mx3dMkBox, Mx3dMkSphere, 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 loadSTEP() { const input = document.createElement("input"); input.type = "file"; input.style.display = "none"; input.accept = ".step,.stp"; input.onchange = async () => { if (!input.files) return; const aFile = input.files[0]; const doc = mxcad3d.getDocument(); const status = await doc.read(aFile, MdGe.MxFormat.Format_STEP); console.log(aFile.name + ": 读取" + status ? "奏效！" : "失败！"); }; input.click(); } function saveSTEP() { mxcad3d.removeAll(); // 将视图文档对象中的文档推行清空，并烧毁视图中露馅的图形 // 创建一些图形 const box = new Mx3dMkBox(new Mx3dGePoint(), new Mx3dGePoint(100, 100, 100)); // 创建一个立方体，对角点在(0,0,0)和(100,100,100) const boxShape = box.Shape(); // 获得立方体图形对象 const sphere = new Mx3dMkSphere(new Mx3dGeCSYSR(new Mx3dGePoint(200, 50, 50), new Mx3dGeDir(0, 0, 1)), 50); // 创建一个球体，半径为50，中心点在(200,50,50) const sphereShape = sphere.Shape(); // 获得球体图形对象 // 创建一些豪情 const green = new Mx3dGeColor(MdGe.MxNameOfColor.Color_NOC_GREEN); // 创建一个豪情对象，豪情为绿色 const red = new Mx3dGeColor(MdGe.MxNameOfColor.Color_NOC_RED); // 创建一个豪情对象，豪情为红色 const doc = mxcad3d.getDocument(); // 获得文档对象 const boxShapeLabel = doc.addShapeLabel(); // 文档中加多一个boxShapeLabel标签，用于保存boxShape模样和对应的豪情等信息 const sphereShapeLabel = doc.addShapeLabel(); // 文档中加多一个sphereShapeLabel标签，用于保存sphereShape模样和对应的豪情等信息 boxShapeLabel.setShape(boxShape); // boxShapeLabel保存boxShape模样 boxShapeLabel.setColor(green); // boxShapeLabel的豪情为绿色 sphereShapeLabel.setShape(sphereShape); // sphereShapeLabel保存sphereShape模样 sphereShapeLabel.setColor(red); // sphereShapeLabel的豪情为红色 mxcad3d.update(); // 更新视图露馅 const status = doc.write("mode.step", MdGe.MxFormat.Format_STEP); console.log("保存" + (status ? "奏效！" : "失败！")); } // 立即实行函数，给button添加点击事件 (function addEventToButton() { const btnOpen = document.querySelector("#open"); const btnSave = document.querySelector("#save"); if (btnOpen && btnSave) { btnOpen.addEventListener("click", () => { loadSTEP(); }); btnSave.addEventListener("click", () => { saveSTEP(); }); } })();
4. 运行名堂，测试绽放STEP模子
按照官方快速初学教程，新建末端，运行`npx vite`大喊来运行名堂，不雅察遵循如下：
模子被奏效绽放，如下图：
5. 测试保存为STEP文献
点击“保存为STEP文献”按钮后，领先移除了原本导入的模子，然后创建了一个立方体和球体并露馅，终末点击对话框的保存按钮，模子就奏效保存为了STEP模子文献，保存奏效后可再次通过“绽放STEP模子”按钮来绽放刚刚保存的mode.step这个模子文献:
6. `mxcad3d` 不啻能绽放STEP模样的模子文献，还能绽放STL、IGES等模样的模子文献，天下不妨自行测试。