Home

MeshEdgesGeometry~MeshEdgesGeometry.js

stl.js

Summary.

STL, OBJ, VTK and GLTF Viewer.

For educational purposes only.

Uses Three.js to load, display, and manipulate a model read from a file. The center of the model bounding box is translated to the origin so an arcball like controller can rotate the model. The app interface was designed for mobile devices, and the whole (vastly commented) code is only about a thousand lines of Vanilla JS code.

I am not a designer, and none of the models used here were made by me. The sources of the models are in the links below, and I would like to thank their authors.

Four file formats are currently supported:

  1. STL is a file format commonly used for 3D printing and computer-aided design (CAD). The name STL is an acronym that stands for stereolithography — a popular 3D printing technology. You might also hear it referred to as Standard Triangle Language or Standard Tessellation Language.

    2. STL does not support an indexed geometry. That is why it has multiple duplicate vertices on all triangles (explicit representation), and each vertex borrows its normal from the triangle it belongs to. As a consequence, at the same position, there are multiple normal vectors. This leads to a non-smooth surface when using the normal attribute for lighting calculation. Therefore, some magical code is necessary to smooth the model by applying mergeVertices to its BufferGeometry followed by a recalculation of their normals.

  2. OBJ (or .OBJ) is a geometry definition file format first developed by Wavefront Technologies for its Advanced Visualizer animation package. The file format is open and has been adopted by other 3D graphics application vendors.

    MTL file, short for Material Template Library, is companion file format used in 3D computer graphics and modeling. It is often associated with Wavefront OBJ file format, which is common format for storing 3D models and their associated materials and textures.

  3. VTK provides a number of source and writer objects to read and write popular data file formats. The Visualization Toolkit also provides some of its own file formats.

    The main reason for creating yet another data file format is to offer a consistent data representation scheme for a variety of dataset types, and to provide a simple method to communicate data between software.

  4. GLTF glTF (Graphics Library Transmission Format or GL Transmission Format and formerly known as WebGL Transmissions Format or WebGL TF) is a standard file format for three-dimensional scenes and models. A glTF file uses one of two possible file extensions: .gltf (JSON/ASCII) or .glb (binary). Both .gltf and .glb files may reference external binary and texture resources.
Notes:
  • I strongly recommend using texture sizes of at most 4k (4096 bytes) for mobile devices.
    There is an excellent tool for resizing all textures at once: 
       # Resize textures.
   gltf-transform resize input.glb output.glb --width 1024 --height 1024
  • Zoom and Pan when using an ArcballControls on a mobile device only work by calling setCamera() every time the camera position changes. As a matter of fact, Three.js has some nasty idiosyncrasies, such as having distinct APIs for the three types of controls supported.
  • Visual Effects and Finishing is everything. Therefore, I created a few cool environment maps for some models.
  • There is a JSON file for loading models hosted somewhere else. Unless a CORS-related issue denials the access, the loaders are able to bring all referenced files.
  • This script has been tested on:
    • iPhone 6E,
    • iPhone 7+,
    • iPhone 8,
    • iPhone 11,
    • iPhone 13,
    • iPad mini 5,
    • Windows 11,
    • macOS Catalina/Monterey,
    • and Ubuntu 22.04,
    running Safari, Firefox, Chrome and Edge.
  • All mobile devices have a very limited amount of resources, such as texture memory.
    In this case, the application may crash and restart by itself, depending on the hardware capabilities.
  • For hiding a browser's toolbar on iOS, just touch the AA symbol on the left of the address bar, and select the option: "Hide Toolbar".
    • Since:
    • 18/07/24
    Author:
    • Paulo Roma Cavalcanti
    Copyright:
    • © 2024 Paulo R Cavalcanti.
    License:
    Source:
    See: