Model Viewer

https://modelviewer.dev/
Admin
Model Viewer is a web component that lets you easily display interactive 3D models and augmented...
Tokens:93,406
Snippets:654
Trust Score:9.5
Update:1 month ago
Show doc for...
Tokens:
Raw
### WebXR AR Session Implementation

Source: https://modelviewer.dev/examples/augmentedreality

This example demonstrates the full setup for an AR-enabled model viewer, including the HTML structure for the viewer and UI elements, the JavaScript logic for switching models and handling XR events, and the CSS for styling the AR interface.

```html
<model-viewer src="../../assets/ShopifyModels/Chair.glb" poster="../../assets/ShopifyModels/Chair.webp" shadow-intensity="1" ar camera-controls touch-action="pan-y" alt="A 3D model carousel">
  
  <button slot="ar-button" id="ar-button">
    View in your space
  </button>

  <div id="ar-prompt">
    <img src="../../assets/hand.png">
  </div>

  <button id="ar-failure">
    AR is not tracking!
  </button>

  <div class="slider">
    <div class="slides">
      <button class="slide selected" onclick="switchSrc(this, 'Chair')" style="background-image: url('../../assets/ShopifyModels/Chair.webp');">

      </button><button class="slide" onclick="switchSrc(this, 'Mixer')" style="background-image: url('../../assets/ShopifyModels/Mixer.webp');">

      </button><button class="slide" onclick="switchSrc(this, 'GeoPlanter')" style="background-image: url('../../assets/ShopifyModels/GeoPlanter.webp');">
      
      </button><button class="slide" onclick="switchSrc(this, 'ToyTrain')" style="background-image: url('../../assets/ShopifyModels/ToyTrain.webp');">
      
      </button><button class="slide" onclick="switchSrc(this, 'Canoe')" style="background-image: url('../../assets/ShopifyModels/Canoe.webp');">    
    </button></div>
  </div>
</model-viewer>

<script type="module">
  const modelViewer = document.querySelector("model-viewer");

  window.switchSrc = (element, name) => {
    const base = "../../assets/ShopifyModels/" + name;
    modelViewer.src = base + '.glb';
    modelViewer.poster = base + '.webp';
    const slides = document.querySelectorAll(".slide");
    slides.forEach((element) => {element.classList.remove("selected");});
    element.classList.add("selected");
  };

  document.querySelector(".slider").addEventListener('beforexrselect', (ev) => {
    // Keep slider interactions from affecting the XR scene.
    ev.preventDefault();
  });
</script>

<style>
  /* This keeps child nodes hidden while the element loads */
  :not(:defined) > * {
    display: none;
  }

  model-viewer {
    background-color: #eee;
    overflow-x: hidden;
  }

  #ar-button {
    background-image: url(../../assets/ic_view_in_ar_new_googblue_48dp.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 12px 50%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    bottom: 132px;
    padding: 0px 16px 0px 40px;
    font-family: Roboto Regular, Helvetica Neue, sans-serif;
    font-size: 14px;
    color:#4285f4;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    border: 1px solid #DADCE0;
  }

  #ar-button:active {
    background-color: #E8EAED;
  }

  #ar-button:focus {
    outline: none;
  }

  #ar-button:focus-visible {
    outline: 1px solid #4285f4;
  }

  @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 {
    position: absolute;
    left: 50%;
    bottom: 175px;
    animation: elongate 2s infinite ease-in-out alternate;
    display: none;
  }

  model-viewer[ar-status="session-started"] > #ar-prompt {
    display: block;
  }

  model-viewer > #ar-prompt > img {
    animation: circle 4s linear infinite;
  }

  model-viewer > #ar-failure {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 175px;
    display: none;
  }

  model-viewer[ar-tracking="not-tracking"] > #ar-failure {
    display: block;
  }

  .slider {
    width: 100%;
    text-align: center;
    overflow: hidden;
    position: absolute;
    bottom: 16px;
  }

  .slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  .slide {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    margin-right: 10px;
    border-radius: 10px;
    border: none;
    display: flex;
  }

  .slide.selected {
    border: 2px solid #4285f4;
  }

  .slide:focus {
    outline: none;
  }

  .slide:focus-visible {
    outline: 1px solid #4285f4;
  }

</style>
```

--------------------------------

### Implement Animated Texture Switching

Source: https://modelviewer.dev/examples/scenegraph

This example demonstrates how to create and switch between Lottie, video, and canvas textures on a model-viewer element.

```html
<model-viewer id="animated" camera-controls touch-action="pan-y" src="../../shared-assets/models/sphere.glb" ar alt="A 3D model of a duck">
                  <div class="controls glass">
                    <p>Texture Type</p>
                    <custom-select id="type">
                      <option value="lottie">Lottie</option>
                      <option value="video">Video</option>
                      <option value="canvas">Canvas</option>
                    </custom-select>
                  </div>
                </model-viewer>
                <script type="module">
                  const modelViewerAnimated = document.querySelector("model-viewer#animated");

                  let videoTexture = null;
                  let canvasTexture = null;
                  let lottieTexture = null;

                  customElements.whenDefined('model-viewer').then(() => {
                    videoTexture = modelViewerAnimated.createVideoTexture("../../shared-assets/models/lottie-logo.mp4");
                  });

                  function getCanvasTexture() {
                    if (canvasTexture) return canvasTexture;
                    canvasTexture = modelViewerAnimated.createCanvasTexture();
                    const canvas = canvasTexture.source.element;
                    canvas.width = 1600;
                    canvas.height = 800;
                    const ctx = canvas.getContext('2d');
                    ctx.font = "250px sans-serif";
                    ctx.fillStyle = "#aaa";
                    ctx.fillText('Canvas 2D!', 0, 400);
                    canvasTexture.source.update();
                    return canvasTexture;
                  }

                  function getLottieTexture() {
                    if (lottieTexture) return lottieTexture;
                    lottieTexture = modelViewerAnimated.createLottieTexture("../../shared-assets/models/24017-lottie-logo-animation.json", 2);
                    return lottieTexture;
                  }

                  modelViewerAnimated.addEventListener("load", async () => {

                    const material = modelViewerAnimated.model.materials[0];
                    const { baseColorTexture } = material.pbrMetallicRoughness;

                    baseColorTexture.setTexture(await getLottieTexture());

                    document.querySelector('#type').addEventListener('input', async (event) => {
                      switch (event.target.value) {
                        case "video":
                          baseColorTexture.setTexture(videoTexture);
                          break;
                        case "canvas":
                          baseColorTexture.setTexture(getCanvasTexture());
                          break;
                        case "lottie":
                          baseColorTexture.setTexture(await getLottieTexture());
                          break;
                      }
                    });
                  });

                </script>
```

--------------------------------

### Color Grading Example with model-viewer and color-grade-effect

Source: https://modelviewer.dev/examples/postprocessing

Interactive example showing the rendering difference with and without <color-grade-effect> when <bloom-effect> is applied. Includes a checkbox to toggle color grading and a select to choose tonemapping modes. The script updates the effect's blendMode and tonemapping properties.

```html
<model-viewer id="colorViewer" camera-controls touch-action="pan-y" ar src="../../shared-assets/models/EmissiveStrengthTest.glb" scale="0.1 0.1 0.1" alt="A 3D model of an astronaut">
                  <effect-composer render-mode="quality" msaa="8">
                    <bloom-effect></bloom-effect>
                    <color-grade-effect></color-grade-effect>
                  </effect-composer>
                  <div class="controls glass">
                    <div>
                      <input type="checkbox" id="colorgrading" checked>
                      <label for="colorgrading">Color Grading</label>
                    </div>
                    <label for="tonemapping">Tonemapping:</label>
                    <select id="tonemapping">
                      <option value="aces_filmic">Aces Filmic</option>
                      <option value="reinhard">Reinhard</option>
                      <option value="reinhard2">Reinhard2</option>
                      <option value="reinhard2_adaptive">Reinhard2 Adaptive</option>
                      <option value="optimized_cineon">Optimized Cineon</option>
                    </select>
                  </div>
                </model-viewer>
```

```javascript
<script type="module">
                  const colorViewer = document.querySelector("model-viewer#colorViewer");
                  const colorGradeEffect = colorViewer.querySelector('color-grade-effect');
                  const colorGrading = colorViewer.querySelector('#colorgrading');
                  const tonemapping = colorViewer.querySelector('#tonemapping');

                  colorGrading.addEventListener('change', (e) => colorGradeEffect.blendMode = e.target.checked ? 'default' : 'skip');
                  tonemapping.addEventListener('input', (e) => colorGradeEffect.tonemapping = e.target.value);
                </script>
```

--------------------------------

### play(options)

Source: https://modelviewer.dev/docs

Starts playing animations. Options allow specifying repetitions and ping-pong behavior.

```APIDOC
## play(options)

### Description
Causes animations to be played. You can specify the number of repetitions and whether to alternate forward and backward.

### Method
play(options: {repetitions, pingpong})

### Parameters
- **repetitions** (number) - Optional - Number of repetitions, greater than 0, defaults to Infinity.
- **pingpong** (boolean) - Optional - If true, alternately plays forward and backward, defaults to false.

### Notes
Use the autoplay attribute to play automatically.
```

--------------------------------

### Quick Start <model-viewer> implementation

Source: https://modelviewer.dev/index.html

Import the model-viewer module and use the <model-viewer> element to display a 3D model with AR support and camera controls.

```html
<!-- Import the component -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.3.1/model-viewer.min.js"></script>

<!-- Use it like any other HTML element -->
<model-viewer alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" src="shared-assets/models/NeilArmstrong.glb" ar environment-image="shared-assets/environments/moon_1k.hdr" poster="shared-assets/models/NeilArmstrong.webp" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
```

--------------------------------

### Swap textures with model-viewer and custom-select

Source: https://modelviewer.dev/examples/scenegraph

This example demonstrates using custom-select elements to provide texture options for a model-viewer component. It includes the HTML structure for texture selection and the initial JavaScript setup to access the model's materials.

```html
<model-viewer id="helmet" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Assets/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb" ar alt="A 3D model of a helmet">
                  <div class="controls glass">
                     <div>
                      <p>Diffuse</p>
                      <custom-select id="diffuse">
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/DamagedHelmet/glTF/Default_albedo.jpg">
                          Damaged helmet</option>
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/Lantern/glTF/Lantern_baseColor.png">
                          Lantern Pole</option>
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/WaterBottle/glTF/WaterBottle_baseColor.png">
                          Water Bottle</option>
                      </custom-select>
                    </div>
                    <div>
                      <p>Metallic-roughness</p>
                      <custom-select id="metallicRoughness">
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/DamagedHelmet/glTF/Default_metalRoughness.jpg">
                          Damaged helmet</option>
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/Lantern/glTF/Lantern_roughnessMetallic.png">
                          Lantern Pole</option>
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/WaterBottle/glTF/WaterBottle_occlusionRoughnessMetallic.png">
                          Water Bottle</option>
                      </custom-select>
                    </div>
                    <div>
                      <p>Normals</p>
                      <custom-select id="normals">
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/DamagedHelmet/glTF/Default_normal.jpg">
                          Damaged helmet</option>
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/Lantern/glTF/Lantern_normal.png">
                          Lantern Pole</option>
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/WaterBottle/glTF/WaterBottle_normal.png">
                          Water Bottle</option>
                      </custom-select>
                    </div>
                    <div>
                      <p>Occlusion</p>
                      <custom-select id="occlusion">
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/DamagedHelmet/glTF/Default_AO.jpg">
                          Damaged helmet</option>
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/WaterBottle/glTF/WaterBottle_occlusionRoughnessMetallic.png">
                          Water Bottle</option>
                      </custom-select>
                    </div>
                    <div>
                      <p>Emission</p>
                      <custom-select id="emission">
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/DamagedHelmet/glTF/Default_emissive.jpg">
                          Damaged helmet</option>
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/Lantern/glTF/Lantern_emissive.png">
                          Lantern Pole</option>
                        <option value="../../shared-assets/models/glTF-Sample-Assets/Models/WaterBottle/glTF/WaterBottle_emissive.png">
                          Water Bottle</option>
                      </custom-select>
                    </div>
                  </div>
                </model-viewer>
                <script type="module">
                  const modelViewerTexture1 = document.querySelector("model-viewer#helmet");

                  modelViewerTexture1.addEventListener("load", () => {

                    const material = modelViewerTexture1.model.materials[0];
```

--------------------------------

### Select and Modify Material Color

Source: https://modelviewer.dev/examples/scenegraph

Demonstrates selecting a material using pointer input and changing its color. This example also shows the use of the scale attribute for models not modeled in meters.

```html
<model-viewer id="pickMaterial" shadow-intensity="1" camera-controls touch-action="pan-y" disable-tap src="../../shared-assets/models/glTF-Sample-Assets/Models/MetalRoughSpheresNoTextures/glTF-Binary/MetalRoughSpheresNoTextures.glb" ar ar-modes="webxr" scale="100 100 100" alt="A Material Picking Example">
                </model-viewer>
                <script type="module">
                  const modelViewer = document.querySelector("model-viewer#pickMaterial");

                  modelViewer.addEventListener("load", () => {
                    const changeColor = (event) => {
                      if (modelViewer.modelIsVisible) {
                        const material = modelViewer.materialFromPoint(event.clientX, event.clientY);
                        if (material != null) {
                          material.pbrMetallicRoughness.
                            setBaseColorFactor([Math.random(), Math.random(), Math.random()]);
                        }
                      }
                    };

                    document.addEventListener("click", changeColor);
                  });
                </script>
```

--------------------------------

### Apply color-grade-effect to model-viewer

Source: https://modelviewer.dev/examples/postprocessing/index.html

This example demonstrates integrating <color-grade-effect> within an <effect-composer> and using JavaScript to toggle the effect and switch between different tonemapping modes.

```html
<model-viewer id="colorViewer" camera-controls touch-action="pan-y" ar src="../../shared-assets/models/EmissiveStrengthTest.glb" scale="0.1 0.1 0.1" alt="A 3D model of an astronaut">
                  <effect-composer render-mode="quality" msaa="8">
                    <bloom-effect></bloom-effect>
                    <color-grade-effect></color-grade-effect>
                  </effect-composer>
                  <div class="controls glass">
                    <div>
                      <input type="checkbox" id="colorgrading" checked>
                      <label for="colorgrading">Color Grading</label>
                    </div>
                    <label for="tonemapping">Tonemapping:</label>
                    <select id="tonemapping">
                      <option value="aces_filmic">Aces Filmic</option>
                      <option value="reinhard">Reinhard</option>
                      <option value="reinhard2">Reinhard2</option>
                      <option value="reinhard2_adaptive">Reinhard2 Adaptive</option>
                      <option value="optimized_cineon">Optimized Cineon</option>
                    </select>
                  </div>
                </model-viewer>
                <script type="module">
                  const colorViewer = document.querySelector("model-viewer#colorViewer");
                  const colorGradeEffect = colorViewer.querySelector('color-grade-effect');
                  const colorGrading = colorViewer.querySelector('#colorgrading');
                  const tonemapping = colorViewer.querySelector('#tonemapping');

                  colorGrading.addEventListener('change', (e) => colorGradeEffect.blendMode = e.target.checked ? 'default' : 'skip');
                  tonemapping.addEventListener('input', (e) => colorGradeEffect.tonemapping = e.target.value);
                </script>
```

--------------------------------

### Create and Apply Textures with model-viewer

Source: https://modelviewer.dev/examples/scenegraph

This example shows a model-viewer element with a custom UI for selecting and applying normal map textures. It uses the createTexture method to load images and apply them to the model's material channel.

```html
<model-viewer id="duck" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Assets/Models/Duck/glTF-Binary/Duck.glb" ar alt="A 3D model of a duck">
                  <div class="controls glass">
                    <p>Normals</p>
                    <custom-select id="normals2">
                      <option>None</option>
                      <option value="../../shared-assets/models/glTF-Sample-Assets/Models/DamagedHelmet/glTF/Default_normal.jpg">
                        Damaged helmet</option>
                      <option value="../../shared-assets/models/glTF-Sample-Assets/Models/Lantern/glTF/Lantern_normal.png">
                        Lantern Pole</option>
                      <option value="../../shared-assets/models/glTF-Sample-Assets/Models/WaterBottle/glTF/WaterBottle_normal.png">
                        Water Bottle</option>
                    </custom-select>
                    <p>Custom texture name</p>
                    <p id="texture-name">None</p>
                    <p>Image name from file name</p>
                    <p id="image-name">None</p>
                  </div>
                </model-viewer>
                <script type="module">
                  const modelViewerTexture = document.querySelector("model-viewer#duck");
                  const textureName = document.querySelector('#texture-name');
                  const imageName = document.querySelector('#image-name');

                  modelViewerTexture.addEventListener("load", () => {

                    const material = modelViewerTexture.model.materials[0];

                    const createAndApplyTexture = async (channel, event) => {
                      if (event.target.value == "None") {
                        // Clears the texture.
                        material[channel].setTexture(null);
                        // Display the names values
                        textureName.innerText = "None";
                        imageName.innerText = "None";
                      } else if (event.target.value) {
                        // Creates a new texture.
                        const texture = await modelViewerTexture.createTexture(event.target.value);
                        // Set the texture name
                        texture.name = event.target.options[event.target.selectedIndex].text.replace(/ /g, "_").toLowerCase();
                        // Applies the new texture to the specified channel.
                        material[channel].setTexture(texture);
                        // Display the names values
                        textureName.innerText = texture.name;
                        imageName.innerText = texture.source.name;
                      }
                    }

                    document.querySelector('#normals2').addEventListener('input', (event) => {
                      createAndApplyTexture('normalTexture', event);
                    });
                  });

                </script>
```

--------------------------------

### Define Hotspots and Annotations in model-viewer

Source: https://modelviewer.dev/examples/annotations

This example demonstrates how to style hotspots and annotations using CSS and integrate them into a model-viewer element. It includes specific configurations for visibility toggling and screen-space positioning.

```html
<style>
                  .hotspot {
                    display: block;
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    border: none;
                    background-color: blue;
                    box-sizing: border-box;
                    pointer-events: none;
                  }

                  .hotspot[slot="hotspot-hand"] {
                    --min-hotspot-opacity: 0;
                    background-color: red;
                  }

                  .hotspot[slot="hotspot-foot"]:not([data-visible]) {
                    background-color: transparent;
                    border: 3px solid blue;
                  }

                  .annotation {
                    background-color: #888888;
                    position: absolute;
                    transform: translate(10px, 10px);
                    border-radius: 10px;
                    padding: 10px;
                  }

                  model-viewer > .annotation {
                    transform: translate(10px, 10px);
                  }

                  @media only screen and (max-width: 800px) {
                    model-viewer > .annotation {
                      transform: translate(4.5rem, 10px);
                    }
                  }

                  /* This keeps child nodes hidden while the element loads */
                  :not(:defined)>* {
                    display: none;
                  }
                </style>
                <model-viewer id="hotspot-demo" ar ar-modes="webxr" camera-controls touch-action="pan-y" src="../../shared-assets/models/Astronaut.glb" poster="../../assets/poster-astronaut.webp" tone-mapping="aces" shadow-intensity="1" alt="A 3D model of an astronaut.">
                  <button class="hotspot" slot="hotspot-visor" data-position="0 1.75 0.35" data-normal="0 0 1"></button>
                  <button class="hotspot" slot="hotspot-hand" data-position="-0.54 0.93 0.1" data-normal="-0.73 0.05 0.69">
                    <div class="annotation">This hotspot disappears completely</div>
                  </button>
                  <button class="hotspot" slot="hotspot-foot" data-position="0.16 0.1 0.17" data-normal="-0.07 0.97 0.23" data-visibility-attribute="visible"></button>
                  <div class="annotation">This annotation is fixed in screen-space</div>
                </model-viewer>
```

--------------------------------

### Apply selective-bloom-effect to emissive meshes

Source: https://modelviewer.dev/examples/postprocessing

This example demonstrates how to configure the effect-composer and use the updated-selection event to filter meshes with emissive materials for the selective-bloom-effect.

```html
<model-viewer camera-orbit="45deg 115deg auto" camera-controls touch-action="pan-y" autoplay src="../../shared-assets/models/RocketShip.glb" ar alt="A 3D model of a Rocket Ship">
                  <effect-composer id="selectiveComposer" render-mode="quality">
                    <selective-bloom-effect strength="5" radius="0.7" threshold="0"></selective-bloom-effect>
                    <color-grade-effect></color-grade-effect>
                  </effect-composer>
                </model-viewer>
                <script type="module">
                  const selectiveComposer = document.querySelector("effect-composer#selectiveComposer");
                  const selectiveBloom = selectiveComposer.querySelector("selective-bloom-effect");

                  selectiveComposer.addEventListener('updated-selection', () => {
                    const selection = [];
                    selectiveComposer.selection.forEach((obj) =>
                      (obj.material.emissive.r > 0
                        || obj.material.emissive.g > 0
                        || obj.material.emissive.b > 0) &&
                      selection.push(obj)
                    );
                    selectiveBloom.selection = selection;
                  });
                </script>
```

--------------------------------

### Customize loading experience with your own HTML

Source: https://modelviewer.dev/examples/loading

Use reveal='manual' to delay loading until the user clicks a button. The example includes custom CSS for a poster overlay and a button, and a script that calls dismissPoster() to trigger the model load.

```html
<style>
                  #lazy-load-poster {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background-image: url("../../assets/poster-damagedhelmet.webp");
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center;
                  }

                  #button-load {
                    background-image: url("../../assets/ic_get_app_white_24dp.svg");
                    background-repeat: no-repeat;
                    background-size: 24px 24px;
                    background-position: 6% 50%;
                    background-color: #000;
                    color: white;
                    cursor: pointer;
                    border-radius: 6px;
                    display: inline-block;
                    padding: 10px 18px 9px 40px;
                    font-weight: 500;
                    box-shadow: 0 0 8px rgba(0, 0, 0, .2), 0 0 4px rgba(0, 0, 0, .25);
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate3d(-50%, -50%, 0);
                    z-index: 100;
                  }
                </style>
                <!-- use unique asset to ensure lazy loading -->
                <model-viewer id="lazy-load" camera-controls touch-action="pan-y" reveal="manual" src="../../shared-assets/models/glTF-Sample-Assets/Models/DamagedHelmet/glTF/DamagedHelmet.gltf" alt="A 3D model of a damaged helmet">
                  <div id="lazy-load-poster" slot="poster"></div>
                  <div id="button-load" slot="poster">Load 3D Model</div>
                </model-viewer>

                <script>
                  document.querySelector('#button-load').addEventListener('click',
                    () => document.querySelector('#lazy-load').dismissPoster());
                </script>
```

--------------------------------

### Display a poster until loaded with <model-viewer>

Source: https://modelviewer.dev/examples/loading

Use the poster attribute to show a static image while the model loads. This example uses loading='eager' and includes camera-controls, auto-rotate, and tone-mapping='aces'.

```html
<model-viewer id="reveal" loading="eager" camera-controls touch-action="pan-y" auto-rotate poster="../../assets/poster-shishkebab.webp" tone-mapping="aces" src="../../shared-assets/models/shishkebab.glb" shadow-intensity="1" alt="A 3D model of a shishkebab"></model-viewer>
```

--------------------------------

### Configuring and Toggling Postprocessing Effects

Source: https://modelviewer.dev/examples/postprocessing

This example demonstrates how to define multiple effects within an effect-composer and use JavaScript to toggle their blend-mode dynamically based on checkbox input.

```html
<model-viewer id="effectsViewer" camera-controls scale="0.1 0.1 0.1" touch-action="pan-y" src="../../shared-assets/models/EmissiveStrengthTest.glb" ar alt="A 3D ">
                  <effect-composer render-mode="quality">
                    <outline-effect color="blue" blend-mode="skip"></outline-effect>
                    <ssao-effect blend-mode="skip"></ssao-effect>
                    <glitch-effect blend-mode="skip"></glitch-effect>
                    <smaa-effect blend-mode="skip"></smaa-effect>
                    <bloom-effect blend-mode="skip"></bloom-effect>
                    <pixelate-effect granularity="5" blend-mode="skip"></pixelate-effect>
                    <color-grade-effect blend-mode="default"></color-grade-effect>
                  </effect-composer>
                  <div class="controls glass">
                    <div>
                      <input type="checkbox" id="outline">
                      <label for="outline">Outline Effect</label>
                    </div>
                    <div>
                      <input type="checkbox" id="ssao">
                      <label for="ssao">SSAO Effect</label>
                    </div>
                    <div>
                      <input type="checkbox" id="glitch">
                      <label for="glitch">Glitch Effect</label>
                    </div>
                    <div>
                      <input type="checkbox" id="smaa">
                      <label for="smaa">SMAA Effect</label>
                    </div>
                    <div>
                      <input type="checkbox" id="bloom">
                      <label for="bloom">Bloom Effect</label>
                    </div>
                    <div>
                      <input type="checkbox" id="pixelate">
                      <label for="pixelate">Pixelate Effect</label>
                    </div>
                    <div>
                      <input type="checkbox" id="colorgrade" checked>
                      <label for="colorgrade">Color Grade Effect</label>
                    </div>
                  </div>
                </model-viewer>
                <script type="module">
                  const effectsViewer = document.querySelector("model-viewer#effectsViewer");
                  const effects = effectsViewer.querySelector("effect-composer").children;
                  const inputs = effectsViewer.querySelectorAll("input");

                  for (let i = 0; i < effects.length; i++) {
                    inputs[i].addEventListener('change', (e) => effects[i].blendMode = e.target.checked ? 'default' : 'skip');
                  }
                </script>
```

--------------------------------

### Adjust PBR Material Factors with model-viewer

Source: https://modelviewer.dev/examples/scenegraph

This example demonstrates how to use the model-viewer component with HTML range inputs to update the metallic and roughness factors of a 3D model's material at runtime.

```html
<model-viewer id="sphere" camera-controls touch-action="pan-y" interaction-prompt="none" src="../../shared-assets/models/reflective-sphere.gltf" ar alt="A 3D model of a sphere">
                  <div class="controls glass">
                    <div>
                      <p>Metalness: <span id="metalness-value"></span></p>
                      <input id="metalness" type="range" min="0" max="1" step="0.01" value="1">
                    </div>
                    <div>
                      <p>Roughness: <span id="roughness-value"></span></p>
                      <input id="roughness" type="range" min="0" max="1" step="0.01" value="0">
                    </div>
                  </div>
                </model-viewer>
                <script>
                  const modelViewerParameters = document.querySelector("model-viewer#sphere");

                  modelViewerParameters.addEventListener("load", (ev) => {

                    let material = modelViewerParameters.model.materials[0];

                    let metalnessDisplay = document.querySelector("#metalness-value");
                    let roughnessDisplay = document.querySelector("#roughness-value");

                    metalnessDisplay.textContent = material.pbrMetallicRoughness.metallicFactor;
                    roughnessDisplay.textContent = material.pbrMetallicRoughness.roughnessFactor;

                    // Defaults to gold
                    material.pbrMetallicRoughness.setBaseColorFactor([0.7294, 0.5333, 0.0392]);

                    document.querySelector('#metalness').addEventListener('input', (event) => {
                      material.pbrMetallicRoughness.setMetallicFactor(event.target.value);
                      metalnessDisplay.textContent = event.target.value;
                    });

                    document.querySelector('#roughness').addEventListener('input', (event) => {
                      material.pbrMetallicRoughness.setRoughnessFactor(event.target.value);
                      roughnessDisplay.textContent = event.target.value;
                    });
                  });
                </script>
```

--------------------------------

### Animated Hotspots with SVG Overlays

Source: https://modelviewer.dev/examples/annotations

This example demonstrates a model-viewer element with hotspots defined by data-surface attributes, an SVG overlay for drawing lines, and a script to update those lines based on the model's animation and window resizing.

```html
<model-viewer id="animation-demo" autoplay ar ar-modes="webxr" scale="0.01 0.01 0.01" camera-orbit="90deg auto auto" shadow-intensity="1" camera-controls touch-action="pan-y" src="../../shared-assets/models/Horse.glb" alt="A 3D model of a horse galloping.">
                  <div slot="hotspot-nose" class="anchor" data-surface="0 0 228 113 111 0.217 0.341 0.442"></div>
                  <div slot="hotspot-hoof" class="anchor" data-surface="0 0 752 733 735 0.132 0.379 0.489"></div>
                  <div slot="hotspot-tail" class="anchor" data-surface="0 0 220 221 222 0.405 0.061 0.534"></div>
                  <svg id="lines" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="lineContainer">
                    <line class="annotation-line"></line>
                    <line class="annotation-line"></line>
                    <line class="annotation-line"></line>
                  </svg>

                  <div id="container">
                    <button id="nose" class="label">Nose</button>
                    <button id="hoof" class="label">Hoof</button>
                    <button id="tail" class="label">Tail</button>
                  </div>
                </model-viewer>

                <script type="module">
                  const modelViewer1 = document.querySelector('#animation-demo');
                  const lines = modelViewer1.querySelectorAll('line');
                  let baseRect;
                  let noseRect;
                  let hoofRect;
                  let tailRect;

                  function onResize() {
                    const arStatus = modelViewer1.getAttribute('ar-status');
                    baseRect = (arStatus == "not-presenting" || arStatus == "failed") ?
                      modelViewer1.getBoundingClientRect() : new DOMRect();
                    noseRect = document.querySelector('#nose').getBoundingClientRect();
                    hoofRect = document.querySelector('#hoof').getBoundingClientRect();
                    tailRect = document.querySelector('#tail').getBoundingClientRect();
                  }

                  window.addEventListener("resize", onResize);

                  modelViewer1.addEventListener('ar-status', (event) => {
                    lines.forEach((element) => {
                      if (event.detail.status !== 'session-started') {
                        element.classList.remove('hide');
                      } else {
                        element.classList.add('hide');
                      }
                    });
                    onResize();
                  });

                  modelViewer1.addEventListener('load', () => {
                    onResize();
                    // update svg
                    function drawLine(svgLine, name, rect) {
                      const hotspot = modelViewer1.queryHotspot('hotspot-' + name);
                      svgLine.setAttribute('x1', hotspot.canvasPosition.x);
                      svgLine.setAttribute('y1', hotspot.canvasPosition.y);
                      svgLine.setAttribute('x2', (rect.left + rect.right) / 2 - baseRect.left);
                      svgLine.setAttribute('y2', rect.top - baseRect.top);
                    }

                    // use requestAnimationFrame to update with renderer
                    const startSVGRenderLoop = () => {
                      drawLine(lines[0], 'nose', noseRect);
                      drawLine(lines[1], 'hoof', hoofRect);
                      drawLine(lines[2], 'tail', tailRect);
                      requestAnimationFrame(startSVGRenderLoop);
                    };

                    startSVGRenderLoop();
                  });
                </script>
                <style>
                  .anchor {
                    display: none;
                  }

                  .lineContainer {
                    pointer-events: none;
                    display: block;
                  }

                  .annotation-line {
                    stroke: #16a5e6;
                    stroke-width: 2;
                    stroke-dasharray: 2
                  }
```

--------------------------------

### Model Transformation and AR Overlay Implementation

Source: https://modelviewer.dev/examples/scenegraph

This example demonstrates configuring a model-viewer element with orientation and scale attributes, alongside custom CSS for an AR overlay button and input controls. It includes specific CSS to handle mobile keyboard overlays and input styling to prevent unwanted viewport zooming.

```html
<style>
                  model-viewer#transform {
                    container-type: size;
                  }
                  .custom-ar-button {
                    position: absolute;
                    top: 16px;
                    right: 16px;
                    background-color: white;
                    border: 1px solid #dadce0;
                    border-radius: 4px;
                    padding: 8px 12px;
                    font-weight: 500;
                    font-size: 14px;
                    color: #1a73e8;
                    box-shadow: 0 2px 4px rgba(0,0,0,.1);
                    cursor: pointer;
                    z-index: 10;
                    transform: translateY(calc(100cqh - 100% - 32px));
                    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                  }
                  @container (max-width: 700px) {
                    .custom-ar-button {
                      transform: translateY(0px);
                    }
                  }
                  .controls input.number {
                    width: 40px;
                  }
                  /* Hide spin-button for Chrome, Safari, Edge, Opera */
                  .controls input::-webkit-outer-spin-button,
                  .controls input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                  }
                  /* Hide spin-button for Firefox */
                  .controls input[type=number] {
                    -moz-appearance: textfield;
                  }
                  model-viewer#transform[ar-status="session-started"] .controls {
                    position: fixed;
                  }
                </style>
                <model-viewer id="transform" orientation="20deg 0 0" shadow-intensity="1" camera-controls touch-action="pan-y" ar src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut">
                  <button slot="ar-button" class="custom-ar-button">View in AR</button>
                  <div class="controls glass">
                    <div>Roll: <input type="number" step="any" inputmode="decimal" id="roll" value="20" size="3" class="number" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"> degrees</div>
                    <div>Pitch: <input type="number" step="any" inputmode="decimal" id="pitch" value="0" size="3" class="number" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"> degrees</div>
                    <div>Yaw: <input type="number" step="any" inputmode="decimal" id="yaw" value="0" size="3" class="number" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"> degrees</div>
                    <div>
                      Scale: X: <input type="number" step="any" inputmode="decimal" id="x" value="1" size="3" class="number" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false">,
```

--------------------------------

### BlendMode API example with color-grade-effect

Source: https://modelviewer.dev/examples/postprocessing

Shows a model-viewer with an effect-composer using render-mode='quality' and msaa='8', containing a color-grade-effect. Includes HTML controls for opacity and blend mode, and a script that updates the effect's opacity and blendMode properties on user input.

```html
<model-viewer id="blendViewer" camera-controls touch-action="pan-y" ar src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut">
                  <effect-composer render-mode="quality" msaa="8">
                    <color-grade-effect contrast="0.5" saturation="-1" opacity="1" blend-mode="default"></color-grade-effect>
                  </effect-composer>
                  <div class="controls glass">
                    <label for="opacity">Opacity</label>
                    <input id="opacity" type="range" min="0" max="1" step="0.01" value="1">
                    <label for="blend-mode">Blend Mode:</label>
                    <select id="blend-mode">
                      <option value="default">Default</option>
                      <option value="skip">Skip</option>
                      <option value="add">Add</option>
                      <option value="subtract">Subtract</option>
                      <option value="divide">Divide</option>
                      <option value="negation">Negation</option>
                    </select>
                  </div>
                </model-viewer>
```

```javascript
<script type="module">
                  const blendViewer = document.querySelector("model-viewer#blendViewer");
                  const blendEffect = blendViewer.querySelector('color-grade-effect');
                  const opacity = blendViewer.querySelector('#opacity');
                  const mode = blendViewer.querySelector('#blend-mode');

                  opacity.addEventListener('input', (e) => blendEffect.opacity = e.target.value);
                  mode.addEventListener('change', (e) => blendEffect.blendMode = e.target.value);
                </script>
```

--------------------------------

### Swap Model Variants with <model-viewer>

Source: https://modelviewer.dev/examples/scenegraph

This example demonstrates how to populate a custom select element with available material variants from a GLB model and apply the selected variant using the variantName attribute.

```html
<model-viewer id="shoe" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Assets/Models/MaterialsVariantsShoe/glTF-Binary/MaterialsVariantsShoe.glb" ar alt="A 3D model of a Shoe">
                  <div class="controls glass">
                    <div>Variant: <custom-select id="variant"></custom-select></div>
                  </div>
                </model-viewer>
                <script>
                  const modelViewerVariants = document.querySelector("model-viewer#shoe");
                  const select = document.querySelector('#variant');

                  modelViewerVariants.addEventListener('load', () => {
                    const names = modelViewerVariants.availableVariants;
                    for (const name of names) {
                      const option = document.createElement('option');
                      option.value = name;
                      option.textContent = name;
                      select.appendChild(option);
                    }
                    // Adds a default option.
                    const option = document.createElement('option');
                    option.value = 'default';
                    option.textContent = 'Default';
                    select.appendChild(option);
                  });

                  select.addEventListener('input', (event) => {
                    modelViewerVariants.variantName = event.target.value === 'default' ? null : event.target.value;
                  });
                </script>
```
Tokens:
Raw