Widget:ModelViewer: Difference between revisions

Revision as of 20:54, 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., '270px'). Default 270px	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}-->"
      alt="<!--{$alt|escape|default:'3D Model'}-->"
-     width="<!--{$width|escape}-->"
+     style="width: <!--{$width|escape|default:'100%'}-->; height: <!--{$height|escape|default:'270px'}-->;
-    height="<!--{$height|escape}-->"
      <!--{if $poster}-->poster="<!--{$poster|escape}-->"<!--{/if}-->