Overview

Interactive 3D Viewer for STL Files with Volume Calculation, Dimension Lines, and Screenshot Functionality – perfect for CAD visualizations directly in your Mendix app.

Documentation

STLViewer – Interactive 3D STL Viewer for Mendix

Description

The STLViewer widget allows you to visualize and analyze STL files directly in your Mendix app. This powerful React-based widget leverages Three.js to deliver an intuitive 3D view of CAD models, including automatic volume and dimension calculation and orientation-dependent measurement lines.

Features

• OrbitControls with optional auto-rotation
• Automatic calculation of volume, width, height, and depth (in cm³/cm)
• Camera orientation detection (front/side/top) triggers dynamic dimension line rendering
• Automatic grid placement below the object
• Automatic screenshot generation (Base64)
• Color customization of the STL model via property
• Performance-optimized renderer with proper cleanup
• Responsive behavior on window resize

Input Parameters

• Property: file
• Type: FileDocument
• Description: STL file to display

• Property: stlColor
• Type: String
• Description: Optional: Model color (Hex code or name)

• Property: volume
• Type: Decimal
• Description: Optional: Output field for volume (cm³) – automatically calculated

• Property: objWidth
• Type: Decimal
• Description: Optional: Output field for width (cm) – automatically calculated

• Property: objHeight
• Type: Decimal
• Description: Optional: Output field for height (cm) – automatically calculated

• Property: objDepth
• Type: Decimal
• Description: Optional: Output field for depth (cm) – automatically calculated

• Property: b64Screenshot
• Type: String
• Description: Optional: Base64 screenshot of the 3D scene – automatically calculated

Note: The values for volume, objWidth, objHeight, objDepth, and b64Screenshot are automatically calculated by the JavaScript logic at runtime and passed back into the corresponding Mendix attributes.

Output

• Live preview of the STL model
• Automatically calculated values (available as Mendix attributes)
• Screenshot available for documentation or further processing

Technology Stack

• React + TypeScript
• Three.js
• STLLoader, OrbitControls
• Custom utilities for: grid placement, dimension labels, camera orientation detection

Inspiration & Credits

This module was inspired by several open-source projects and community contributions, including:

• react-stl-file-viewer (https://github.com/yatheeshraju/react-stl-file-viewer)  – A simple React component for STL file rendering.
• StackOverflow: Draw dimension lines using Three.js (https://stackoverflow.com/questions/25432540/draw-dimension-lines-along-with-3d-cube-using-three-js) – A discussion about implementing 3D measurement lines.
• stlviewer-datatag.js (https://wejn.org/assets/js/stlviewer-datatag.js) – Example for annotations and data tags in STL visualization.

We gratefully acknowledge these projects for their inspiration and technical insight during the development of STLViewer.

Sources used:

• basic react stl viewer
• 2D dimension Lines
• Fit Object to Camera

GitHub Link: https://github.com/avocodo/MendixStlViewer

Licence: CC BY-SA 4.0