examples

Using Slots In <model-viewer>. This page demonstrates how you can change parts of <model-viewer> using web component slots.

Custom AR Button

Since this slot will only appear on an AR enabled device screenshots are provided below. They compare the <model-viewer> default button in the bottom right and a custom button ("👋 Activate AR") in the top right of the viewport, with a custom style.

Image displaying the default <model-viewer> button of a box with slits cut out in the lower-right, next to the example astronaut model. Image displaying <model-viewer> with a custom button reading '👋 Activate AR'.

Transparent Background

©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.
Github ∙ Glitch ∙ Bug report