Widget:ModelViewer: Difference between revisions

Revision as of 01:00, 31 July 2025

Embeds a 3D model using the <model-viewer> web component. Supports many configuration parameters like camera controls, AR, environment, and animations.

Template parameters[Edit template data]
Parameter		Description	Type	Status
Source	`src`	URL to the 3D model file (e.g., .glb or .gltf).	String	required
Alt text	`alt`	Alternative text describing the model. Default 3D Model	String	optional
Width	`width`	Width of the viewer (e.g., '100%' or '500px'). Default 100%	String	optional
Height	`height`	Height of the viewer (e.g., '300px'). Default 300px	String	optional
Poster image	`poster`	URL to an image displayed before the model loads.	String	optional
Loading	`loading`	Loading behavior ('eager' or 'lazy').	String	optional
Reveal	`reveal`	When to reveal the model ('auto', 'interaction').	String	optional
With credentials	`withCredentials`	Use cross-origin credentials when fetching resources.	Boolean	optional
Auto-rotate	`autoRotate`	Automatically rotate the model.	Boolean	optional
Auto-rotate delay	`autoRotateDelay`	Delay before auto-rotation starts, in milliseconds.	String	optional
Camera controls	`cameraControls`	Allow user to control camera.	Boolean	optional
Background color	`backgroundColor`	CSS color value for the viewer background.	String	optional
AR mode	`ar`	Enable AR features.	Boolean	optional
iOS source	`iosSrc`	URL to the USDZ model for AR on iOS.	String	optional
AR button text	`arButtonText`	Custom text for the AR button.	String	optional
Loading text	`loadingText`	Custom text to display while loading.	String	optional
Error text	`errorText`	Custom text to display if loading fails.	String	optional

@@ Line 1: / Line 1: @@
+<span>
+<includeonly>
 <model-viewer
      src="<!--{$src|escape}-->"
@@ Line 54: / Line 56: @@
      >
 </model-viewer>
+</includeonly>
+</span>
 <noinclude>
 {{Documentation}}