### 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

``` -------------------------------- ### 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

Texture Type

``` -------------------------------- ### 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 when 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

Color Grading

Tonemapping:

``` ```javascript ``` -------------------------------- ### 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 implementation Source: https://modelviewer.dev/index.html Import the model-viewer module and use the element to display a 3D model with AR support and camera controls. ```html ``` -------------------------------- ### 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

Diffuse

Metallic-roughness

Normals

Occlusion

Emission

``` -------------------------------- ### Apply color-grade-effect to model-viewer Source: https://modelviewer.dev/examples/postprocessing/index.html This example demonstrates integrating within an and using JavaScript to toggle the effect and switch between different tonemapping modes. ```html

Color Grading

Tonemapping:

``` -------------------------------- ### 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

Normals

Custom texture name

None

Image name from file name

None

``` -------------------------------- ### 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

This annotation is fixed in screen-space

``` -------------------------------- ### 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

``` -------------------------------- ### 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

Load 3D Model

``` -------------------------------- ### Display a poster until loaded with 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 ``` -------------------------------- ### 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

Outline Effect

SSAO Effect

Glitch Effect

SMAA Effect

Bloom Effect

Pixelate Effect

Color Grade Effect

``` -------------------------------- ### 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

Metalness:

Roughness:

``` -------------------------------- ### 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

Roll: degrees

Pitch: degrees

Yaw: degrees

Scale: X: , ``` -------------------------------- ### 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

Opacity Blend Mode:

``` ```javascript ``` -------------------------------- ### Swap Model Variants with 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

Variant:

```