Description
Model Viewer 3D allows for displaying 3D models.
Please note that when using a mobile device, an additional icon will be visible in the vicinity of the 3D model. Interacting with the icon allows switching the preview to the Augmented Reality mode (https://modelviewer.dev/examples/augmentedreality).
Properties
The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.
Property name |
Description |
Model |
Path to the file containing the 3D model. Supports only the glTF/GLB 3D models. |
Poster |
Displays an image instead of the model, useful for showing the user something before the model is loaded and ready to render. |
Annotations |
Additional text displayed in the preview. |
Environment Image |
Controls the environmental reflection of the model. Normally, if skybox-image is set, that image will also be used for the environment-image. |
Skybox Image |
Sets the background image of the scene. Takes a URL to an equirectangular projection image that is used for the skybox, as well as applied as an environment map on the model. Supports PNG, HDR, and JPG images. |
Shadow Intensity |
Controls the opacity of the shadow. Setting it to 0 turns off the shadow. |
Shadow Softness |
Controls the blurriness of the shadow. Setting it to 0 results in hard shadows. Softness should not be changed for each frame as this has a performance cost.
|
Auto Rotate |
Automatically slowly rotates the model. |
Scale |
Sets scale of the model. |
Labels Enabled on Start |
Labels are visible immediately after loading the model. |
Alt Text |
Sets the alternative text for the "model-viewer" element. |
Additional Attributes |
Additional attributes that could be set for the model (see the Additional Attributes section below). Data should be entered in JSON format. |
Copyright Info |
This field contains information relating to copyright. |
Interaction Prompt |
Allows disabling the visual and audible interaction prompt. If checked, the interaction prompt is set to "auto". The interaction prompt will be displayed as soon as the interaction-prompt-threshold time has elapsed (after the model is loaded). The interaction prompt will only display if camera-controls are enabled. |
Supported commands
Command name |
Params |
Description |
show |
... |
Shows the module if it is hidden. |
hide |
... |
Hides the module if it is visible. |
showAnnotations |
... |
Shows annotations if they are available for the model. |
hideAnnotations |
... |
Hides annotations available for the model. |
getAnnotationsVisibility |
... |
Returns annotations visibility status of the model. |
setScale |
number |
Sets the model's scale. |
Additional Attributes Examples
Attribute |
Description |
autoplay |
Possible values: "true", "false". When set to "true", the animation is played automatically when the page is loaded. |
animation-name |
Changes the default animation to the specified one. |
camera-orbit |
Sets the starting position of the camera. The properties are specified in the following order: x-axis, y-axis, and camera distance. Example value: "0deg 75deg 105%". |
max-camera-orbit |
Sets the maximum orbital values of the camera – useful if the default 3D model values are too large/too small. Example value: "auto 360deg 120%". |
camera-target |
Sets the starting point that the camera orbits around. The properties are specified in the following order: x-axis, y-axis, and z-axis. Example value: "1m -1m 0m". |
The full list of attributes is available at https://modelviewer.dev/docs/
CSS classes
Class name |
Description |
.copyMessage |
Sets styles for the message wrapper. |
.copyMessage-visible |
Sets styles for the displayed message wrapper. |
.buttonsContainer |
Sets styles for the button's container. |
.labelsButton |
Sets styles for the button which changes the view of annotations. |
.labelsButton-selected |
Sets styles for the clicked button which changes the view of annotations. |
.copyButton |
Sets styles for the copy button. |
.model-viewer-button |
Sets styles for all the buttons. |
Demo presentation
Demo presentation showing how to use the Model Viewer 3D module.