Swap Model Variants

This demonstrates the use of the glTF materials variants extension which allows multiple materials and textures to be packed with a single geometry in a GLB. Our API exposes these variant names as availableVariants and you can select one using the variantName attribute. This is similar functionality to the lower-level scene-graph API below, but in that case it is up to you to choose the right texture URL, rather than having that information stored in the GLB. Note: setting variantName to null reverts to the initial material.

Model Transformations

This demonstrates the orientation and scale attributes which allow the model to be transformed. Note that if specified before the model loads, they will be taken into account by the automatic camera framing. If they are changed afterwards the camera will not move, so to get new automatic framing the updateFraming() method must be called.

Note that these changes can be made in AR as well, but only in WebXR mode, as this is the only mode that remains in the browser. Changes you made ahead of time will not be reflected in Scene Viewer, since this app downloads the original model again from its URL. iOS Quick Look will reflect your changes as long as ios-src is not specified, since in this case a USDZ will be generated on the fly from the current state.

Directly manipulate the scene graph

Change Material Base Color

This is an experimental feature, and the API is considered highly unstable. Please try it out, but be prepared for it to change!

As above, you can change these values in AR, but only in WebXR mode. iOS Quick Look does not reflect these color changes as USDZ does not appear to support colors multiplied onto textures.

Change Material Metalness and Roughness Factors

As above, you can change these values in AR, but only in WebXR mode. iOS Quick Look does reflect these property changes since they are not also textured.

Create textures

As above, you can change these values in AR, but only in WebXR mode. iOS Quick Look reflects these texture changes so long as the USDZ is auto-generated.

Swap textures

As above, you can change these values in AR, but only in WebXR mode. iOS Quick Look reflects these texture changes so long as the USDZ is auto-generated.

Materials API

The complete Materials interface is documented below, which is all accessible through the model property. The Materials API is designed to follow the glTF structure, just as though you are navigating their JSON object. Only the materials and their children are exposed rather than the whole scene graph to keep the scope small for this high-level web component. Not every glTF parameter is exposed, but more may be added in the future. Additionally, several methods have been added for useful operations.

This example demonstrates selecting a material with pointer input and changing its color. Note this also works in the WebXR AR mode. It also demonstrates the use of the scale attribute since this GLB was erroneously modeled in mm instead of meters.

examples

Exporter