https://github.com/cloudfour/lite-model-viewer
A lazy-loaded model-viewer web component
https://github.com/cloudfour/lite-model-viewer
Last synced: 25 days ago
JSON representation
A lazy-loaded model-viewer web component
- Host: GitHub
- URL: https://github.com/cloudfour/lite-model-viewer
- Owner: cloudfour
- License: mit
- Created: 2023-11-17T18:49:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-01T23:38:25.000Z (about 2 years ago)
- Last Synced: 2025-10-26T17:49:36.589Z (5 months ago)
- Language: HTML
- Homepage: https://lite-model-viewer.netlify.app
- Size: 92.8 KB
- Stars: 9
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lite Model-Viewer
[](https://www.npmjs.org/package/@cloudfour/lite-model-viewer)
Lite Model-Viewer is a web component to lazy-load `` for improved performance.
- [Demo](https://lite-model-viewer.netlify.app/)
## How Does It Work?
The `` web component accepts all the same attributes as ``, and will display a poster image if provided. When `` is clicked, it will inject the `` element into the page, which will immediately activate and load the 3D file.
## Installation
```shell
npm install @cloudfour/lite-model-viewer
```
## Usage
```html
View Model
```
Note that although we're adding a `` element, it's just a visual indicator. There is a click event listener applied to the entire `` element, so the user can click anywhere on the poster image to trigger the load event.
## Features
- Any attributes on `` will be applied to ``.
- See `` docs for [more info on available attributes](https://modelviewer.dev).
- Provide an optional `` element to pass content into ``, to set a custom progress bar, etc.
- Set an optional `height` and `width` attribute, which will apply to both the `` preview and the lazy-loaded `` element.
- By default, Lite Model-Viewer will load the Model-Viewer script from [Google's CDN](https://developers.google.com/speed/libraries#model-viewer). If you'd prefer to self-host the script, you can do so by including the script in your page with the `id="model-viewer-script"` attribute. If Lite Model-Viewer detects this script, it will not load the script from Google's CDN.
- See [Demo](https://lite-model-viewer.netlify.app/) for more details.