Lite Model-Viewer

Return to the GitHub repo.

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

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.

Minimal Example

By default, Lite Model-Viewer is unopinionated and largely unstyled. Clicking anywhere in the element will load the 3D model. It will use the default progress indicator, a simple loading bar along the top.

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

View Model Button

You may want to provide a visual affordance to indicate that the user should interact with the element to view it. In this example, we've added a simple button element. Note that the button technically doesn't do anything, since the click listener is on the element itself. Any content you add will be centered over the poster image.

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

Custom Width and Height

If you provide a width and height, they will be applied to both the <lite-model-viewer> and <model-viewer>, and scale the poster image to fit. (If none are provided, the default is 300px tall and 100% wide.)

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

Custom Progress Bar & AR Button

You can use a <template> element to provide custom markup for a progress bar and AR button, and style them as you see fit. For this example, we've also added some custom styles for the buttons and progress bar. (Note the AR button will only display on AR-capable devices, like a recent iPhone.)

<lite-model-viewer
  src="your-model.glb"
  poster="your-poster.webp"
  ar
  camera-controls
  shadow-intensity="1"
>
  <template>
    <div class="progress-bar" slot="progress-bar">
      <div class="update-bar"></div>
    </div>
    <button slot="ar-button" id="ar-button">View in your space</button>
  </template>
  <button>View Model</button>
</lite-model-viewer>

Custom Elements to Support Android Users

This demo adds custom elements for android users to improve their experience. (Learn more)

<lite-model-viewer
  src="your-model.glb"
  poster="your-poster.webp"
  ar
  camera-controls
  shadow-intensity="1"
>
  <template>
    <div class="progress-bar" slot="progress-bar">
      <div class="update-bar"></div>
    </div>
    <button slot="ar-button" id="ar-button">View in your space</button>
    <div id="ar-prompt">
      <img src="ar_hand_prompt.webp" />
    </div>
    <style>
      /* @see https://modelviewer.dev/examples/augmentedreality/ */
      @keyframes circle {
        from {
          transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);
        }
        to {
          transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);
        }
      }
      @keyframes elongate {
        from {
          transform: translateX(100px);
        }
        to {
          transform: translateX(-100px);
        }
      }
      model-viewer > #ar-prompt {
        animation: elongate 2s infinite ease-in-out alternate;
        bottom: 60px;
        display: none;
        left: 50%;
        position: absolute;
      }
      model-viewer[ar-status="session-started"] > #ar-prompt {
        display: block;
      }
      model-viewer > #ar-prompt > img {
        animation: circle 4s linear infinite;
      }
    </style>
  </template>
  <button>View Model</button>
</lite-model-viewer>

Self-host the Model-Viewer Script

By default, Lite Model-Viewer will load the Model-Viewer script from Google's CDN. If you'd prefer to self-host the script for performance reasons, 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.

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

Return to the GitHub repo.