I find myself working with STL files on a fairly regular basis. It’s a fairly simple format, pretty easy to output, and usually my go-to when exporting out of various CAD system. If you’ve procured a 3d model to use with your with your home printer, chances are you’ve run into STL.

I’ve been looking to write up and show a few such project STLs this summer, I decided to dust off an older web component I had sitting around and bring it into the future. Hence, welcome <stl-part-viewer>.

Built using Polymer 3 and the new lighter base class lit-element, <stl-part-viewer> uses three.js as well as my modified stl-loader and orbit-controls to bring a simple 3D viewer to your browser.

The real magic is in the use of Intersection Observer to load the STL file when only in the viewport and will pause the renderer when the viewer exists the viewport. Combined with the ability to load a dynamic JS module, you can lazy load the component on an as needed basis.

Demo

Words, words, words you say. How about a simple demo using the Polymer logo? And yes, I open sourced the polymer STL’s if you want to print them. :-)

From a code standpoint, the using the viewer is straight forward:

For a full set of attributes that can be set, visit the repo: justinribeiro/stl-part-viewer

If it looks familiar, the colors and general look are based on Cura (though the mirror floor is more reminiscent of the Thingiverse viewer).

In use

I’ve published the web component on npm as @justinribeiro/stl-part-viewer, so installing and using in your project is just an npm or yarn command away:

In use, make sure that you polyfill intersection observer and web components (see README) for additional information.