@cloudfour/lite-model-viewer

2.0.0 • Public • Published

Lite Model-Viewer

NPM version

Lite Model-Viewer is a web component to lazy-load <model-viewer> for improved performance.

How Does It Work?

The <lite-model-viewer> web component accepts all the same attributes as <model-viewer>, and will display a poster image if provided. When <lite-model-viewer> is clicked, it will inject the <model-viewer> element into the page, which will immediately activate and load the 3D file.

Installation

npm install @cloudfour/lite-model-viewer

Usage

<lite-model-viewer
  src="your-asset.glb"
  poster="your-poster.webp"
  ar
  camera-controls
  shadow-intensity="1"
>
  <button>View Model</button>
</lite-model-viewer>

<script type="module" src="lite-model-viewer.js"></script>

Note that although we're adding a <button> element, it's just a visual indicator. There is a click event listener applied to the entire <lite-model-viewer> element, so the user can click anywhere on the poster image to trigger the load event.

Features

  • Any attributes on <lite-model-viewer> will be applied to <model-viewer>.
  • Provide an optional <template> element to pass content into <model-viewer>, to set a custom progress bar, etc.
  • Set an optional height and width attribute, which will apply to both the <lite-model-viewer> preview and the lazy-loaded <model-viewer> element.
  • 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 id="model-viewer-script" attribute. If Lite Model-Viewer detects this script, it will not load the script from Google's CDN.
  • See Demo for more details.

Readme

Keywords

none

Package Sidebar

Install

npm i @cloudfour/lite-model-viewer

Weekly Downloads

12

Version

2.0.0

License

MIT

Unpacked Size

20.4 kB

Total Files

5

Last publish

Collaborators

  • cloudfour-user
  • gerardo-rodriguez
  • calebeby
  • spaceninja
  • cloudfour-paul
  • tylersticka