1. When performing 3D modeling in web CAD, it is often necessary to import and export 3D model files in STEP format. This article will introduce how to use mxcad3d to import and export STEP 3D models.
2. First, we need to learn the basic usage of mxcad3d. You can set up a basic project template through the official getting started tutorial.
https://www.mxdraw3d.com/mxcad_docs3d/en/1.%E5%BC%80%E5%A7%8B/2.%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.html.
4. API Interface Usage Instructions:
https://www.mxdraw3d.com/mxcad_docs3d/api/README.html.
Code Writing And Effect Demonstration
1. Create a project named Test3dImportAndExport according to the official quick start tutorial, as shown in the figure below:
MxCAD3DObject view document object; create a view document object and initialize it through the canvas. This object contains a canvas view for display and a document for saving model information.
Mx3dDbDocument document object; the view document object contains a document object of this type, which can internally create label objects to save model shapes and color material textures.
Mx3dDbLabel label object; created by the document object, various methods of the label object can save the model’s shapes and various information.
The API for loading models is as follows:
/** * Read the model file and parse it into a document. * @param theFile - The file object to be read. * @param theFormat - The model file format. * @returns Returns a Promise, resolving to a boolean indicating success or failure. */ read(theFile: File, theFormat: MdGe.MxFormat): Promise<boolean>;
The read method is a method of the Mx3dDbDocument object, used to read model files of the specified format, and will create labels in the Mx3dDbDocument object to save model information. This method accepts a File type object and a model format specified by the MdGe.MxFormat enumeration. Below are all enumeration values defined by 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 }
The API for saving models is:
/** * Write the document to the specified path. * @param theFilePath - File path. * @param theFormat - File format. * @returns Returns a boolean indicating whether the write was successful. */ write(theFilePath: string, theFormat: MdGe.MxFormat): boolean;
The write method is a method of the Mx3dDbDocument object, used to save the model file in the specified format; this method accepts a File type object and a model format specified by the MdGe.MxFormat enumeration.
3. Write the code to import and save STEP model files
Insert two buttons “Open STEP Model” and “Save As STEP File” in index.html; the complete code for index.html is shown as follows:
<!DOCTYPE html> <html lang="en"> <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">Open STEP Model</button> <button id="save">Save As STEP File</button> <script type="module" src="./src/index.ts"></script> </body> </html>
In src/index.ts, write two functions loadSTEP() and saveSTEP() for opening the STEP model and saving as a STEP file, respectively. The complete code for src/index.ts is shown as follows:
import { MdGe, Mx3dGeColor, Mx3dGeCSYSR, Mx3dGeDir, Mx3dGePoint, Mx3dMkBox, Mx3dMkSphere, MxCAD3DObject } from "mxcad"; // Create mxcad3d object const mxcad3d = new MxCAD3DObject(); // Initialize mxcad3d object mxcad3d.create({ // CSS selector string for the canvas element (id selector in this example), or canvas element object canvas: "#myCanvas", // Path location for loading wasm related files (wasm/js/worker.js) locateFile: (fileName) => new URL(`/node_modules/mxcad/dist/wasm/3d/${fileName}`, import.meta.url).href }); // Initialization complete mxcad3d.on("init", () => { console.log("Initialization complete"); }); 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 + ": Read " + (status ? "successful!" : "failed!") ); }; input.click(); } function saveSTEP() { mxcad3d.removeAll(); // Clear the contents of the document in the view document object, and clear the graphics displayed in the view // Create some graphics const box = new Mx3dMkBox(new Mx3dGePoint(), new Mx3dGePoint(100, 100, 100)); // Create a cube, diagonal points at (0,0,0) and (100,100,100) const boxShape = box.Shape(); // Get the cube shape object const sphere = new Mx3dMkSphere(new Mx3dGeCSYSR(new Mx3dGePoint(200, 50, 50), new Mx3dGeDir(0, 0, 1)), 50); // Create a sphere, radius 50, center point at (200,50,50) const sphereShape = sphere.Shape(); // Get the sphere shape object // Create some colors const green = new Mx3dGeColor(MdGe.MxNameOfColor.Color_NOC_GREEN); // Create a color object, color green const red = new Mx3dGeColor(MdGe.MxNameOfColor.Color_NOC_RED); // Create a color object, color red const doc = mxcad3d.getDocument(); // Get the document object const boxShapeLabel = doc.addShapeLabel(); // Add a boxShapeLabel label in the document to save boxShape shape and corresponding color information const sphereShapeLabel = doc.addShapeLabel(); // Add a sphereShapeLabel label in the document to save sphereShape shape and corresponding color information boxShapeLabel.setShape(boxShape); // boxShapeLabel saves boxShape shape boxShapeLabel.setColor(green); // boxShapeLabel color is green sphereShapeLabel.setShape(sphereShape); // sphereShapeLabel saves sphereShape shape sphereShapeLabel.setColor(red); // sphereShapeLabel color is red mxcad3d.update(); // Update view display const status = doc.write("mode.step", MdGe.MxFormat.Format_STEP); console.log("Save " + (status ? "successful!" : "failed!")); } // Immediately execute function to add click events to buttons (function addEventToButton() { const btnOpen = document.querySelector("#open"); const btnSave = document.querySelector("#save"); if (btnOpen && btnSave) { btnOpen.addEventListener("click", () => { loadSTEP(); }); btnSave.addEventListener("click", () => { saveSTEP(); }); } })();
4. Run the project and test opening the STEP model
According to the official quick start tutorial, open a terminal and run the command npx vite to run the project, observe the effect as follows:
The model was successfully opened, as shown in the figure below:
5. Test saving as a STEP file
After clicking the “Save As STEP File” button, the previously imported model is first removed, then a cube and sphere are created and displayed. Finally, after clicking the save button in the dialog box, the model is successfully saved as a STEP model file. After saving successfully, you can open the recently saved mode.step model file again using the “Open STEP Model” button:
6. mxcad3d can not only open STEP format model files but also open STL, IGES, and other format model files. Everyone is encouraged to test on their own.
