Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justinribeiro/stl-part-viewer
A lit-element web component that uses Three.js to display an STL model file.
https://github.com/justinribeiro/stl-part-viewer
intersectionobserver litelement polymer stl three webcomponent
Last synced: 3 months ago
JSON representation
A lit-element web component that uses Three.js to display an STL model file.
- Host: GitHub
- URL: https://github.com/justinribeiro/stl-part-viewer
- Owner: justinribeiro
- License: mit
- Created: 2018-06-22T21:43:51.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-12T16:33:04.000Z (9 months ago)
- Last Synced: 2024-03-24T01:43:04.359Z (3 months ago)
- Topics: intersectionobserver, litelement, polymer, stl, three, webcomponent
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@justinribeiro/stl-part-viewer
- Size: 260 KB
- Stars: 19
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-lit - `<stl-part-viewer>` - LitElement web component that utilizes Three.js to display an STL model file. (Standalone Components)
README
[](https://badge.fury.io/js/%40justinribeiro%2Fstl-part-viewer)
# \
> A web component that displays an STL model with [three.js](https://threejs.org/) and [Lit](https://lit.dev/).
## Features
* Uses [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load STL files when only in the viewport.
* Uses [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 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:
```sh
npm i @justinribeiro/stl-part-viewer
# or
yarn add @justinribeiro/stl-part-viewer
```
After install, import into your project:
```js
import 'stl-part-viewer';
```
Finally, use as required:
```html
```
## 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](https://developer.mozilla.org/en-US/docs/Web/Web_Components)), and [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). You may need the [Lit polyfill-support](https://lit.dev/docs/releases/upgrade/#load-polyfill-support-when-using-web-components-polyfills) depending on what you're trying to target.
Within your project, you can load them as such:
```html
<script src="../node_modules/intersection-observer/intersection-observer.js">
```