A lazy-loaded model-viewer web component
npm install @cloudfour/lite-model-viewer
Lite Model-Viewer is a web component to lazy-load for improved performance.
- Demo
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.
``shell`
npm install @cloudfour/lite-model-viewer
`html
poster="your-poster.webp"
ar
camera-controls
shadow-intensity="1"
>
`
Note that although we're adding a
- Any attributes on will be applied to .
- See docs for more info on available attributes.
- Provide an optional element to pass content into , to set a custom progress bar, etc.height
- Set an optional and width attribute, which will apply to both the preview and the lazy-loaded element.id="model-viewer-script"` attribute. If Lite Model-Viewer detects this script, it will not load the script from Google's CDN.
- By default, Lite Model-Viewer will load the Model-Viewer script from Google's CDN. If you'd prefer to self-host the script, you can do so by including the script in your page with the
- See Demo for more details.