Detailed explanation of JavaScript loading and exporting STL files

Detailed explanation of STL format

STL (Standard Tessellation Language or StereoLithography) is a file format used to represent the surface of a 3D model, usually composed of triangular patches. It was originally developed by 3D Systems and is mainly used in the fields of rapid prototyping and 3D printing. STL files can be ASCII (text) or binary format, where binary format is more common because it is more compact and loads faster.

STL file structure

ASCII STL:
- Each triangle is described by a set of vertex coordinates.
- Files withsolidStart withendsolidFinish.
- Each triangle is defined as follows:

facet normal nx ny nz
  outer loop
    vertex x1 y1 z1
    vertex x2 y2 z2
    vertex x3 y3 z3
  endloop
endfacet

- This format is easy to read but the file size is large.
Binary STL:
- The header of the file has 80 bytes of title information (usually unused), followed by a 4 byte unsigned integer, indicating the number of triangles.
- Next is the data for each triangle, each taking up 50 bytes, including:
  - 12 bytes: normal vector (3 floating point numbers)
  - 36 bytes: the position of three vertices (12 bytes per vertex, total 36 bytes)
  - 2 bytes: attribute byte count (usually 0)

Features

Simplicity: The STL file contains only triangular patches and has no material, color or other complex information.
Widely used: Due to its simplicity and versatility, STL has become the standard format for exchanging geometric data between 3D printing and CAD systems.
limitation: Lack of support for advanced features such as textures and animations, and is only suitable for static geometry.

Loading and exporting STL files in JavaScript

Loading STL files

ProvidedSTLLoaderCome to load.stldocument. Here is an example of using loading and displaying an STL file:

// Introduce libraries and STLLoaderimport * as THREE from 'three';
import { STLLoader } from 'three/examples/jsm/loaders/';

// Create scenes, cameras and renderersconst scene = new ();
const camera = new (75,  / , 0.1, 1000);
const renderer = new ();
(, );
();

// Set the camera position = 5;

// Load STL fileconst loader = new STLLoader();
('models/', function (geometry) {
    const material = new ({ color: 0x00ff00 });
    const mesh = new (geometry, material);
    
    // Optional: Resize the model    (0.01, 0.01, 0.01);
    
    // Add to scene    (mesh);
    
    // Animation loop    function animate() {
        requestAnimationFrame(animate);
        
        // Optional: Add some basic animations         += 0.01;
         += 0.01;
        
        (scene, camera);
    }
    animate();
}, undefined, function (error) {
    ('An error happened during loading:', error);
});

// Handle window size changes('resize', () =&gt; {
     =  / ;
    ();
    (, );
});

Export STL file

It does not directly provide the function of exporting STL, but you can useSTLExporterClasses to achieve this. Here is how to useSTLExporterAn example of exporting the geometry in it as an STL file:

// Introduce libraries and STLEexporterimport * as THREE from 'three';
import { STLExporter } from 'three/examples/jsm/exporters/';

// Suppose you have an existing mesh object `mesh`const exporter = new STLExporter();

// Export to ASCII formatfunction exportMeshToSTL(mesh) {
    const stlContent = (mesh, { binary: false });

    // Create a Blob object    const blob = new Blob([stlContent], { type: 'text/plain' });

    // Create a download link    const link = ('a');
     = (blob);
     = 'exported_model.stl';
    ();
}

// Call function to export the gridexportMeshToSTL(mesh);

// If you want to export to binary format, just set the `binary` parameter to `true`function exportMeshToBinarySTL(mesh) {
    const stlContent = (mesh, { binary: true });

    // Create a Blob object    const blob = new Blob([stlContent], { type: 'application/octet-stream' });

    // Create a download link    const link = ('a');
     = (blob);
     = 'exported_model_binary.stl';
    ();
}

// Call function to export binary format gridexportMeshToBinarySTL(mesh);

Summarize

STLIt is a file format widely used in the fields of 3D printing and rapid prototyping, and supports two formats: ASCII and binary.
Loading STL filesCan be providedSTLLoaderImplementation is relatively simple and direct.
Export STL fileCan be usedSTLExporterClass, allowing the export of geometry in it to STL files in ASCII or binary format.
Things to note: When dealing with complex 3D models, it is recommended to simplify the model first (such as reducing the number of polygons) to ensure that the generated STL file is suitable for 3D printing or further processing. Additionally, for large models, consider using a binary format to reduce file size and speed up processing.

The above is a detailed explanation of the example of JavaScript loading and exporting STL files. For more information about JavaScript loading and exporting STL, please pay attention to my other related articles!