Viewer Default UI

The HTML3DElement (<babylon-viewer>) custom element includes default UI for a number of Viewer capabilities. All of this UI can be customized, as described later in the styling doc page.

Loading Progress

When a model is loading, a default progress bar is shown near the top of the element. If the model size can be determined, it will show actual progress. If not, it will be displayed as an indeterminate progress bar. The example below loads a large model that will most likely show the progress bar.

Camera

A reset camera pose button is always present. When pressed, the camera will interpolate to the default pose. This is the same as double-clicking/tapping off the model.

Animation

When a model contains animations, controls will be displayed to play/pause the animation, change the speed of the animation, and provide an animation timeline (that can also be manually scrubbed). If a model contains several animations, additional UI is shown to allow selecting the active animation. The example below shows a model with multiple animations.

Material Variants

When a glTF model contains material variants, controls will be displayed to allow selection of the active variant. The example below shows a model with multiple material variants.

HotSpots

When hotspots are defined on a HTML3DElement (<babylon-viewer>) instance, controls will be displayed to allow "focusing" the camera on the hotspot. When selected, the camera will interpolate to the hotspot's target pose.

Further reading