@justinribeiro/stl-part-viewer
v2.1.1
Published
A web component that displays an STL model with three.js and Lit.
Downloads
12
Maintainers
Readme
<stl-part-viewer>
A web component that displays an STL model with three.js and Lit.
Features
- 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
Install
This web component is built with Polymer 3 and ES modules in mind and is available on NPM:
Install stl-part-viewer:
npm i @justinribeiro/stl-part-viewer
# or
yarn add @justinribeiro/stl-part-viewer
After install, import into your project:
import 'stl-part-viewer';
Finally, use as required:
<stl-part-viewer src="part.stl"></stl-part-viewer>
Attributes
The web component allows certain attributes to be give a little additional flexibility.
| Name | Description | Default |
| --- | --- | --- |
| src
| Location of the STL file you want the viewer to load | `` |
| fullscreen
| Text value of the full screen button | Full Screen
|
| backgroundcolor
| Set the background color of the scene; rgb(), hsl(), or X11 color string | 0xf1f1f1
|
| floorcolor
| Set the floor plane color; rgb(), hsl(), or X11 color string | 0x666666
|
| modelcolor
| Set the model color; rgb(), hsl(), or X11 color string | 0xfffe57
|
Polyfills Required
stl-part-viewer
utilizes Custom Elements and Shadow DOM (Web Components), and Intersection Observer. You may need the Lit polyfill-support depending on what you're trying to target.
Within your project, you can load them as such:
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/lit/platform-support.js">
<script src="../node_modules/intersection-observer/intersection-observer.js"></script>