Widget:ModelViewer: Difference between revisions
No edit summary |
No edit summary |
||
| (14 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<span> | <span> | ||
<includeonly> | <includeonly> | ||
<model-viewer | <model-viewer | ||
src="<!--{$src|escape}-->" | src="<!--{$src|escape}-->" | ||
alt="<!--{$alt|escape|default:'3D Model'}-->" | alt="<!--{$alt|escape|default:'3D Model'}-->" | ||
style="width: <!--{$width|escape|default:'240px'}-->; height: <!--{$height|escape|default:'165px'}-->;" | |||
<!--{if $poster}-->poster="<!--{$poster|escape}-->"<!--{/if}--> | <!--{if $poster}-->poster="<!--{$poster|escape}-->"<!--{/if}--> | ||
<!--{if $loading}-->loading="<!--{$loading|escape}-->"<!--{/if}--> | <!--{if $loading}-->loading="<!--{$loading|escape}-->"<!--{/if}--> | ||
| Line 76: | Line 77: | ||
"width": { | "width": { | ||
"label": "Width", | "label": "Width", | ||
"description": "Width of the viewer (e.g., '100%' or ' | "description": "Width of the viewer (e.g., '100%' or '200px').", | ||
"type": "string", | "type": "string", | ||
"default": " | "default": "240px" | ||
}, | }, | ||
"height": { | "height": { | ||
"label": "Height", | "label": "Height", | ||
"description": "Height of the viewer (e.g., ' | "description": "Height of the viewer (e.g., '100%' or '200px').", | ||
"type": "string", | "type": "string", | ||
"default": " | "default": "165px" | ||
}, | }, | ||
"poster": { | "poster": { | ||
Latest revision as of 21:14, 31 July 2025
Embeds a 3D model using the <model-viewer> web component. Supports many configuration parameters like camera controls, AR, environment, and animations.
| 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.
| String | optional |
| Width | width | Width of the viewer (e.g., '100%' or '200px').
| String | optional |
| Height | height | Height of the viewer (e.g., '100%' or '200px').
| 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 |