How to Export 3D HTML Files from FreeCAD

FreeCAD allows users to export 3D CAD models directly into standalone HTML files that can be viewed and interacted with in any standard web browser. This article covers the step-by-step process of using FreeCAD's built-in WebGL export tool to generate viewable 3D HTML files, along with tips for optimizing mesh quality and file size for smooth web performance.

Step 1: Select the 3D Objects

Open your project in FreeCAD. In the tree view on the left-hand panel, select the object, body, or parts you wish to export. If you want to export multiple objects, hold Ctrl (or Cmd on macOS) and click each element to include them in the selection. FreeCAD will only export the elements that are actively highlighted.

Step 2: Export to WebGL HTML

  1. Click on the File menu at the top of the interface.
  2. Select Export... (or press Ctrl+E).
  3. In the export dialog window, click the Files of type dropdown menu.
  4. Locate and select **WebGL format (*.html)**.
  5. Choose a destination folder, enter a file name, and click Save.

FreeCAD automatically converts the solid geometry (B-rep) into a polygonal mesh and embeds it inside an HTML file alongside the necessary WebGL code (typically powered by Three.js) to render the 3D model.

Step 3: View the Exported File

Navigate to the folder where you saved the file and double-click the .html file to open it in any modern browser such as Chrome, Firefox, Safari, or Edge. You can interact with the model directly:

  • Left-click and drag: Rotate the model.
  • Scroll wheel: Zoom in and out.
  • Right-click and drag: Pan across the scene.

Optimizing File Size and Appearance

Because the standard export creates an uncompressed mesh, high-complexity models can result in large HTML files that take longer to load. To optimize performance:

  1. Convert to Mesh First: Switch to the Mesh Design workbench in FreeCAD.
  2. Select your solid model, go to Meshes > Create mesh from shape..., and choose a surface tolerance. A lower tolerance creates a smoother, larger file, while a higher tolerance results in a lightweight, faster-loading file.
  3. Export the resulting mesh object to HTML instead of the original solid body.

Alternative: Modern Web Embedding with glTF

If you plan to embed your model into an existing website rather than using FreeCAD's default HTML template, consider exporting your model as glTF / GLB:

  1. Export your model as a .glb or .gltf file via File > Export.
  2. Embed the file into your own HTML page using standard web components such as Google's <model-viewer> library, which provides modern rendering, shadows, and mobile AR support.