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: 26 days 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 (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-10-12T16:33:04.000Z (about 1 year ago)
• Last Synced: 2024-10-01T02:42:16.903Z (about 1 month ago)
• Topics: intersectionobserver, litelement, polymer, stl, three, webcomponent
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@justinribeiro/stl-part-viewer
• Size: 260 KB
• Stars: 20
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-lit - `<stl-part-viewer>` - LitElement web component that utilizes Three.js to display an STL model file. (Standalone Components)

README

        
[![npm version](https://badge.fury.io/js/%40justinribeiro%2Fstl-part-viewer.svg)](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/).

![screenshot of stl-part-viewer](https://user-images.githubusercontent.com/643503/41803627-a4daf090-763f-11e8-9ef1-a2e11b0a34c6.png)

## 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">

```