A web component that displays an STL model with three.js, Polymer 3, and LitHTML.
- Uses Intersection Observer to load STL files when only in the viewport.
- Uses Intersection Observer to pause rendering of scene when viewer is not in viewport
- Loads Binary and ASCII STL files
- Built as a web component on Polymer 3 / LitElement
This web component is built with Polymer 3 and ES modules in mind and is available on NPM:
npm i @justinribeiro/stl-part-viewer# oryarn add @justinribeiro/stl-part-viewer
After install, import into your project:
Finally, use as required:
The web component allows certain attributes to be give a little additional flexibility.
||Location of the STL file you want the viewer to load||``|
||Text value of the full screen button||
||Set the background color of the scene; rgb(), hsl(), or X11 color string||
||Set the floor plane color; rgb(), hsl(), or X11 color string||
||Set the model color; rgb(), hsl(), or X11 color string||
stl-part-viewer utilizes Custom Elements and Shadow DOM (Web Components), and Intersection Observer. As you can see in the table below, you'll need some polyfills to make use of this across a wide range of browsers.
|Platform Support||Chrome||Chrome for Android||Firefox||Safari||iOS Safari||Edge||IE 11|
Within your project, you can load them as such: