Export Three.js Geometries to STL for 3D Printing

This article provides a practical guide on using the Three.js STLExporter to convert browser-based 3D geometries into the STL (Stereolithography) format, which is the standard file format used for 3D printing. You will learn how to import the exporter, configure the parse options for ASCII or binary output, and implement a JavaScript function to download the generated file directly to your local machine.

1. Import the STLExporter

The STLExporter is not included in the core Three.js library by default. You must import it from the examples/addons directory.

import * as THREE from 'three';
import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js';

2. Set Up the Exporter

To convert your 3D objects, create an instance of the STLExporter and use its .parse() method. This method accepts your Three.js mesh (or an entire scene) along with an options object.

const exporter = new STLExporter();

3. Configure Export Options

The .parse() method accepts a configuration object with the primary option being binary.

• Binary (Recommended): binary: true produces a smaller, compacted file that loads faster in 3D printing slicer software.
• ASCII: binary: false produces a human-readable text file, which is larger but easier to debug.

// Export as a binary STL
const result = exporter.parse( myMesh, { binary: true } );

4. Save and Download the STL File

Once you have parsed the geometry, you need to generate a Blob and trigger a download link in the browser. The helper function below handles both binary and ASCII outputs and prompts the user to save the file.

function downloadSTL(mesh, filename = 'model.stl') {
    const exporter = new STLExporter();
    
    // Parse the mesh to binary STL data
    const result = exporter.parse(mesh, { binary: true });
    
    // Create a blob from the output data
    const blob = new Blob([result], { type: 'application/octet-stream' });
    
    // Create a temporary link element to trigger download
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
    
    // Clean up memory
    URL.revokeObjectURL(link.href);
}

Best Practices for 3D Printing

To ensure your exported Three.js geometries slice correctly in 3D printing software like Cura or PrusaSlicer, keep the following rules in mind:

• Ensure Manifold Geometry: Your meshes must be “water-tight” with no missing faces, holes, or self-intersecting geometry.
• Scale and Units: Three.js unitless dimensions are usually interpreted as millimeters (mm) by most 3D slicers. Ensure your model size in Three.js corresponds to your intended physical dimensions.
• Combine Geometries: If your model consists of multiple meshes, group them or merge their geometries into a single mesh before passing them to the exporter to ensure they print as a unified object.