Skip to content
On this page

mxcad3d allows you to apply textures to models to enhance their visual representation. Before applying a texture, you need to prepare the images. You can use the API provided by mxcad3d to fetch image resources from a server URL.

Texture Mapping

typescript
// Use the LoadFileFromUrl method of Mx3dUtils to fetch the image resource from the URL
// The method returns the complete path of the image resource in the virtual local file system after it successfully loads.
const fname = await Mx3dUtils.LoadFileFromUrl(new URL("./assets/wood.jpg", import.meta.url).href, "wood.jpg");

const boxMaker = new Mx3dMkBox(50, 30, 20);
const boxShape = boxMaker.Shape();

const doc = mxcad3d.getDocument();
const boxLabel = doc.addShapeLabel();
boxLabel.setShape(boxShape);
boxLabel.setTexture(fname);
mxcad3d.update();

Using the static method LoadFileFromUrl of the Mx3dUtils class, the script asynchronously fetches the wood.jpg image from the server's assets directory. The image is then saved to the virtual local file system's root directory with the name wood.jpg (specified as the second argument of LoadFileFromUrl). You can choose a different name for the image file, but the file extension must remain the same.

Once mxcad3d retrieves the image, the line boxLabel.setTexture(fname) fetches the wood.jpg image from the virtual local file system's root directory and assigns it as the texture for the model. After updating the display, the model will have the applied texture.